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

时间:2017-08-21 13:08:59

标签: php jquery json ajax

我正在尝试使用jQuery / JavaScript解析从PHP文件中作为ajax响应发送的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响应时的表格格式:

Image attached

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

uid     pwd

admin   xyz

guest   abc

1 个答案:

答案 0 :(得分:0)

这将获取数据并将每个对象转换为表格中的一行。我将假设#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对象。那你应该没问题。如果你没有,那么它会将它看作一个字符串,然后一次循环一个字符,这将导致你在问题中显示的奇怪输出。