时间戳

首页 > 解决方案 > HTML 数据源 PHP 脚本返回未捕获的错误

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

问题描述

我有一个问题，当我定义时：

data-source="test.json"

或者

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

在我的 HTML 中，我能够成功地让 ajax 填充我的<select>字段，但是当我尝试使用时，data-source="my.php"我得到了一个未捕获的类型错误。

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

这是我的 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.phpwith json_decode()，这很有意义，但我无法弄清楚为什么它在运行时会给我一个错误。

我正在从这个例子中工作

标签： phpjqueryjson

解决方案

假设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;

?>

至于select用 JSON 资源填充你：

$('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>。随后，如果您的代码抛出错误，则更容易跟踪问题。

推荐阅读