Question

我正在尝试通过学习AJAX和PHP将我的网络技能带入21世纪但是已经碰壁了。我想根据从初始选择控件“类别”中选择的内容，使用选项填充选择控件“配方”。辅助控件“recipe”的选项将是针对PostgreSQL数据库表执行的AJAX查询的解析结果。下面代码中显示的函数“makeAjaxRequestCategory”是一个jQuery AJAX调用，它包含属性dataType：'json'。这就是问题所在。我能想到的最好的问题是，当我包含该属性并让代码运行时，问题就出现了，而不是返回带有我可以解析的结果的东西，返回为错误...但是响应对象也指示状态200（这是“好的“......那么为什么它被解释为错误？）。响应对象的responseText属性包括以下内容：

responseText:"<br />↵<b>Parse error</b>:  syntax error, unexpected '}', expecting ',' or ';' in <b>C:\Bitnami\wampstack-5.5.38-0\apache2\htdocs\ajaxSelectCategory.php</b> on line <b>8</b><br />↵

当我注释掉dataType属性并在没有的情况下运行它时，我得到一个不同的错误：

jquery.min.js:4 Uncaught TypeError: Cannot use 'in' operator to search for '179' in <br />(…)

这样做的正确方法似乎是将dataType设置为JSON，然后解析我从PHP返回的JSON对象，但我似乎得到了一个矛盾的响应，错误和200的响应同一时间。请注意，填充“类别”控件的初始PHP调用工作正常。您可以获得有关我可以解析的成功回复的任何指导，我们将非常感激！

这是我的开发环境：

在Windows 10笔记本电脑上使用“localhost”进行本地开发
Apache Web服务器v.2.4.23（Win32）
PostgreSQL版本9.6.1
在Chrome中运行并使用Chrome的DevTools进行故障排除

这是我在浏览器中运行的主文件'recipesystem.php'：

 <!DOCTYPE html>
  <html>
  <head>
  </head>
<body>

Version 317.0<br><br>

<div class = 'selection'>
<table id='selectiontable'>
  <tr>
    <td>Select Recipe Category</td>
  </tr>
  <tr>
    <td>
      <select id="category">
      <option value='Select a category...'></option>
      <?php
        $connection = pg_connect("host=localhost port=5432 dbname=recipes user=postgres password=XXXXXXXX");
        $result = pg_query($connection,"SELECT category FROM recipesystem.recipe ORDER BY category;");
        while ($row = pg_fetch_assoc($result)) {
          unset($category);
          $category = $row['category'];
          echo '<option value="'.$category.'">'.$category.'</option>';
        };
      ?>
    </td>
  </tr>
</table>
</div>
<br>

<select id="recipe">
<option value='Select a recipe...'></option>
</select>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script>
  // This is for the Category selector...
  $('#category').on('change', function(){
    $('#recipe').empty();
    var selected = $(this).val();
    makeAjaxRequestCategory(selected);
    })
  function makeAjaxRequestCategory(opts){
    $.ajax({
      type: 'POST',
      data: { opts: opts },
      dataType: 'json',
      url: 'ajaxSelectCategory.php',
      success: function(res) {
        console.log("Success...")
        console.log(res)
        $.each(res, function(i, value) {
          console.log(value)
         })
        },
      error: function(res){
        console.log("There was an error...")
        console.log(res)
        }
    })
  }
</script>

</body>
</html>

ajaxSelectCategory.php

<?php
    echo "<script> console.log('Starting PHP script....');</script>";
    $connection = pg_connect("host=localhost port=5432 dbname=recipes user=postgres password=XXXXXXXX") or die("Connection Error");
    $result = pg_query($connection,"SELECT name, category FROM recipesystem.recipe ORDER BY category;");
    while ($row = pg_fetch_assoc($result)) {
        echo "$('#recipe').append('<option>newvalue</option>');"
    };
?>

Answer 1

好的，首先HTTP代码是200 OK，这意味着发送请求后跟响应。代码200不保证响应的主体没有任何错误，主要是因为HTTP请求由Apache处理，您看到的错误是由PHP执行代码创建的。如果事情不那么抽象，那么每个想要处理HTTP请求的语言都会实现不同的代码，而这并不是语言的真正责任。

其次，当你在ajax请求上定义dataType: 'json'时，你告诉“嘿，我想接收json格式的数据”，因为你的ajaxSelectCategory.php脚本没有回应json格式的数据，你是从浏览器收到错误，因为JSON解析器不理解您正在接收的内容，它设置为解码JSON，但它没有编码为JSON。

所以要么dataType: 'html'，要么将res视为一个包含HTML代码的整个字符串，要么创建一个包含结果的数组并回显它的json_encode()，那么你才会成为能够在$.each(res, function(i, value) {

中按需要迭代它

Answer 2

很高兴从旧世纪开始，您应该将ajaxSelectCategory.php更改为如下所示：

<?php
    echo "<script> console.log('Starting PHP script....');</script>";
    $connection = pg_connect("host=localhost port=5432 dbname=recipes user=postgres password=XXXXXXXX") or die("Connection Error");
    $result = pg_query($connection,"SELECT name, category FROM recipesystem.recipe ORDER BY category;");
$output=array();
    while ($row = pg_fetch_assoc($result)) {
        $output[] = $row['field name'];
    };
echo json_encode($output);
?>

你的成功回调：

success: function(res) {
        console.log("Success...")
        console.log(res)
        $.each(res, function(i, value) {
          $('<option>'+value+'</option>').appendTo($('#recipe'));
         })
        },

AJAX和PHP - 两种不同的错误，具体取决于JSON dataType的使用

2 个答案: