解析从 PHP 文件作为 AJAX 响应发送的 JSON 字符串

Question

我正在尝试使用 jQuery / JavaScript 解析作为 ajax 响应从 PHP 文件发送的 JSON 字符串。

Ajax 调用：

<script>

            $(document).ready(function(){

              var query = $("#editor").html().replace(/(<([^>]+)>)/ig,"");
                      $.ajax({
                           type: "POST",
                           url: "app/query_db.php",
                           data: "q="+query,
                           success: function(resp){    
                                if(resp)    {
                                    alert("Response : "+resp);
                                    $("#res_data").html(resp);

                                }
                                else{
                                    alert("Response: Failed")
                                }
                      });
                    return false;
                });

            });
        </script>

PHP 文件：

$db_conn = new db_connect();
    $conn = $db_conn->connectToDB($DBHost,$DBName,$DBUser,$DBPwd);

    $query_res = array();


    if (fill_numeric_array_with_query_assoc($query_res, $sql_query, $conn)) {   // Function to execute the query and fill the result
        //do nothing
    } else {
        echo("Error description: " . mysqli_error($conn));  // Error message to display if failed to fetch the data
        exit();
    }
$data = json_encode($query_res);
    echo $data;

Result: [{"uid":"admin","pwd":"xyz"},{"uid":"guest","pwd":"abc"}]

每当我尝试解析上述 JSON 字符串时，我都会以 0 和 1 作为键，而将其他内容作为值。奇怪的是，当我复制此结果并将其分配给 JavaScript 中的变量时，它会正确解析字符串。

在尝试将其解析为 AJAX 响应时不知道出了什么问题。

将 JSON 字符串解析为 AJAX 响应时的表格格式：

在 javascript 中分配给变量时的响应：

uid     pwd

admin   xyz

guest   abc

Answer 1

这将获取数据并将每个对象转换为表格中的一行。我将假设 #res_data 是一个空的 <table> 元素。

$.ajax({
  type: "POST",
  url: "app/query_db.php",
  data: "q=" + query,
  dataType: "json",
  success: function(resp) {
    if (resp) {
      alert("Response : " + resp);
      $("#res_data").empty();
      if (resp.length > 0) {
        var header = "<tr>";
        for (var key in resp[0]) { 
          "<th>" + key + "</th>"; 
        }
        header += "</tr>";
        $("#res_data").append(header);
        var rows = "";
        for (var i=0; i< resp.length;i++) {
          rows += "<tr><td>" + resp[i].uid + "</td><td>" + resp[i].pwd + "</td></tr>";
        }
        $("#res_data").append(rows);
      }
      else { alert("No data returned"); }
    } else {
      alert("Response: Failed")
    }
  }
});

注意额外的 ajax 选项：dataType: "json"。这个很重要。因为您的 PHP 没有发送任何标头来告诉客户端将响应解释为 JSON，所以它很可能将其解释为文本。所以你必须添加dataType:"json" 以便jQuery 知道该做什么，并将响应直接放入一个JS 对象中。那么你应该没有问题。如果您不这样做，那么它会将其视为一个字符串，然后一次循环一个字符，这将导致您在问题中显示的奇怪输出。