在PHP中使用Json编码填充下拉列表

g2ieeal7 于 2023-04-19 发布在 PHP

关注(0)|答案(2)|浏览(104)

我有一个选择下拉列表，我想每隔几秒更新一次动态数据，而不刷新页面。数据应该使用PDO从PHP脚本中检索，并作为JSON响应返回。
问题是，检索到的数据不显示在选择下拉菜单，它是显示在身体作为一个数组，有时把整个页面变成原始HTML。我做错了什么？
以下是我迄今为止尝试过的：

<?php
// PHP script to create an array of numbers from 1-10
$numbers = range(1, 10);
header('Content-Type: application/json');

echo json_encode($numbers);
?>

下面是我用来更新select下拉列表的JavaScript代码：

</script> 
function updateNumbers() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'get_numbers.php');
  xhr.onload = function() {
    if (xhr.status === 200) {
      var numbers = JSON.parse(xhr.responseText);
      var select = document.getElementById('numbers-select');
      select.innerHTML = '';
      for (var i = 0; i \< numbers.length; i++) {
        var option = document.createElement('option');
        option.text = numbers\[i\];
        select.add(option);
      }
    }
  };
  xhr.send();
}

// call function to populate select dropdown on page load
updateNumbers();

// set interval to update select dropdown every 5 seconds
setInterval(updateNumbers, 5000); </script>

//HTML CODE FOR SELECT DROPDOWN    
<select id="numbers-select"></select>

当我运行这段代码时，选择下拉列表是空的，数据以数组的形式显示在页面的主体上（[1，2，3，4，5，6，7，8，9，10]）。我做错了什么？有人能帮我吗？
先谢谢你了！

php

来源：https://stackoverflow.com/questions/76030058/using-json-encode-in-php-to-populate-dropdown

2条答案

按热度按时间

vxf3dgd41#

你的JavaScript有语法错误（只是在3个地方有一些零散的\）-你应该有一个控制台错误，这将阻止它工作。而且add不是一个有效的DOM函数，你可以在一个元素上运行。要将一个元素作为另一个元素的子元素（例如一个选项到一个select），你需要appendChild。
目前还不清楚为什么/如何数据会显示在页面上...除非get_numbers.php也是你获取JavaScript和HTML的同一个PHP脚本。你应该把生成数字的脚本分开，这样它所做的就是响应 AJAX 并返回纯JSON。
客户端代码的工作演示（使用静态数据源而不是PHP）：

function updateNumbers() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.jsonbin.io/v3/b/643c69dac0e7653a05a5a41f?meta=false');
  xhr.onload = function() {
    if (xhr.status === 200) {
      var numbers = JSON.parse(xhr.responseText);
      var select = document.getElementById('numbers-select');
      select.innerHTML = '';
      for (var i = 0; i < numbers.length; i++) {
        var option = document.createElement('option');
        option.text = numbers[i];
        select.add(option);
      }
    }
  };
  xhr.send();
}

// call function to populate select dropdown on page load
updateNumbers();

// set interval to update select dropdown every 5 seconds
setInterval(updateNumbers, 5000);

<select id="numbers-select"></select>

赞(0）回复(0）举报 2023-04-19

bis0qfac2#

根据您的代码，在“HTML CODE FOR SELECT DROPDOWN”注解之前似乎有一个放错位置的结束标记，这可能会导致您遇到的问题。此外，脚本应该 Package 在标记中。
下面是正确的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Select Dropdown</title>
</head>
<body>
    <select id="numbers-select"></select>
    
    <script>
    function updateNumbers() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'get_numbers.php');
        xhr.onload = function() {
            if (xhr.status === 200) {
                var numbers = JSON.parse(xhr.responseText);
                var select = document.getElementById('numbers-select');
                select.innerHTML = '';
                for (var i = 0; i < numbers.length; i++) {
                    var option = document.createElement('option');
                    option.text = numbers[i];
                    select.add(option);
                }
            }
        };
        xhr.send();
    }

    // call function to populate select dropdown on page load
    updateNumbers();

    // set interval to update select dropdown every 5 seconds
    setInterval(updateNumbers, 5000);
    </script>
</body>
</html>

我已经将您的JavaScript代码 Package 在一个标记中，并删除了放错位置的结束标记。
确保get_numbers. php脚本与HTML文件位于同一目录中，其内容如下：

<?php
// PHP script to create an array of numbers from 1-10
$numbers = range(1, 10);
header('Content-Type: application/json');

echo json_encode($numbers);
?>

这应该可以解决选择下拉菜单未正确填充的问题。

赞(0）回复(0）举报 2023-04-19

我来回答

在PHP中使用Json编码填充下拉列表

2条答案

相关问题

热门标签

最新问答