Question

我在定义时存在一个问题：

data-source="test.json"

或

data-source="https://jsonplaceholder.typicode.com/users"

在我的HTML中，我能够如此成功地使ajax填充我的<select>字段，但是当我尝试使用data-source="my.php"时，却遇到了未捕获的typeerror。

我尝试转义file_get_contents()中的URL，但是我不确定这是问题所在。

这是我的HTML选择框：

<select style="width: 300px;" name="imei" id="selectID" data-source="my.php" data-valueKey="id" data-displayKey="name" data-rel="chosen" class="chosen-container chosen-container-single" class="controls" style="display: ;"></select>

my.php文件的外观如下：

<?php

$JSONURL = file_get_contents("https://jsonplaceholder.typicode.com/users");
$readytoprocess = json_decode($JSONURL);
//

?>

这是我的jquery的外观：

$('select[data-source]').each(function() {
  var $select = $(this);

  $select.append('<option></option>');

  $.ajax({
    url: $select.attr('data-source'),
  }).then(function(options) {
    options.map(function(option) {
      var $option = $('<option>');

      $option
        .val(option[$select.attr('data-valueKey')])
        .text(option[$select.attr('data-displayKey')]);

      $select.append($option);
      $option.trigger("chosen:updated"); //update table
    });
  });
});

我希望data-source=允许我将my.php与json_decode()一起使用，这是有道理的，但我不知道为什么运行时会出现错误。

我从this示例开始工作

Answer 1

假设my.php文件将返回有效的JSON资源（jQuery将自动检测该资源），则您的PHP需要返回JSON数据。

<?php

  $json = file_get_contents("https://jsonplaceholder.typicode.com/users");
  $json = json_decode($json);
  // ----
  // Process your $json with PHP here...
  // ----
  $json = json_encode($json);
  echo $json;

?>

并使用JSON资源填充select：

$('select[data-source]').each(function() {
  var $select = $(this);
  var valueKey = $select.attr('data-valueKey');
  var displayKey = $select.attr('data-displayKey');

  $.getJSON($select.attr('data-source')).done(function(options) {
    options.map(function(option) {
      var $option = $(document.createElement('option'))
        .val(option[valueKey])
        .text(option[displayKey])
        .appendTo($select)
        .trigger('chosen:updated')
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select data-source="https://jsonplaceholder.typicode.com/users" data-valueKey="id" data-displayKey="name"></select>

确保包含jQuery库，后跟代码。最好将其放置在文档的末尾，并尽可能靠近</body>。随后，如果您的代码引发错误，则更容易跟踪问题。

HTML数据源PHP脚本返回未捕获的错误

1 个答案: