如何通过ajax将mysql结果作为json传递

Posted 2023-02-24

【中文标题】如何通过ajax将mysql结果作为json传递

【英文标题】：How to pass mysql result as jSON via ajax

【发布时间】：2015-07-16 08:34:17

【问题描述】：

我不确定如何通过 ajax JSON 将 mysql 查询的结果传递到 html 页面。 ajax2.php

$statement = $pdo - > prepare("SELECT * FROM posts WHERE subid IN (:key2) AND Poscode=:postcode2");
$statement - > execute(array(':key2' => $key2, ':postcode2' => $postcode));
// $row = $statement->fetchAll(PDO::FETCH_ASSOC);
while ($row = $statement - > fetch()) 
    echo $row['Name']; //How to show this in the html page?
    echo $row['PostUUID']; //How to show this in the html page?
    $row2[] = $row;

echo json_encode($row2);

如何将上面的查询结果通过下面的ajax传递到html页面中显示？

我的 ajax

$("form").on("submit", function () 
    var data = 
        "action": "test"
    ;

    data = $(this).serialize() + "&" + $.param(data);
    $.ajax(
        type: "POST",
        dataType: "json",
        url: "ajax2.php", //Relative or absolute path to response.php file
        data: data,
        success: function (data) 
            //how to retrieve the php mysql result here?
            console.log(data); // this shows nothing in console,I wonder why?
        
    );
    return false;

);

【问题讨论】：

检查控制台中的网络标签。

@sgtBOSE，相关文件的状态显示正常

回应是什么？

【参考方案1】：

我只想……

$rows = $statement->fetchAll(FETCH_ASSOC);
header("content-type: application/json");
echo json_encode($rows);

然后在javascript端：

xhr.addEventListener("readystatechange",function(ev)
//...
var data=JSON.parse(xhr.responseText);
var span=null;
var i=0;
for(;i<data.length;++i)span=document.createElement("span");span.textContent=data[i]["name"];div.appendChild(span);/*...*/

（不要依赖网络浏览器在 .response 中为您解析它，因为 application/json 标头，它在浏览器之间有所不同...使用 responseText 手动执行）；

【参考方案2】：

您可以将 json 编码的字符串保存到数组中，然后将其值传递给 javascript。

参考下面的代码。

<?php 
// your PHP code 
$jsonData = json_encode($row2); ?>

你的 JavaScript 代码

var data = '<?php echo $jsonData; ?>';

现在data 变量包含所有 JSON 数据，现在您可以继续编写代码，只需删除以下行

 data = $(this).serialize() + "&" + $.param(data);

不需要，因为data 变量是字符串。

在你的ajax2.php文件中你可以通过

json_decode($_REQUEST['data'])

【参考方案3】：

header('Content-Type: application/json');
$row2 = array();
$result = array();
$statement = $pdo->prepare("SELECT * FROM posts WHERE subid IN (:key2) AND Poscode=:postcode2");
$statement->execute(array(':key2' => $key2,':postcode2'=>$postcode));
   // $row = $statement->fetchAll(PDO::FETCH_ASSOC);
     while( $row = $statement->fetch())
     
         echo $row['Name'];//How to show this in the html page?
          echo $row['PostUUID'];//How to show this in the html page?
          $row2[]=$row;
     
if(!empty($row2))
$result['type'] = "success";
$result['data'] = $row2;
else
$result['type'] = "error";
$result['data'] = "No result found";

echo json_encode($row2);

在你的脚本中：

$("form").on("submit",function() 

    var data = 
      "action": "test"
    ;
    data = $(this).serialize() + "&" + $.param(data);
    $.ajax(
      type: "POST",
      dataType: "json",
      url: "ajax2.php", //Relative or absolute path to response.php file
      data: data,
      success: function(data) 
        console.log(data);
         if(data.type == "success")
           for(var i=0;i<data.data.length;i++)
              //// and here you can get your values //
             var db_data = data.data[i];
              console.log("name -- >" +db_data.Name );
              console.log("name -- >" +db_data.PostUUID);
           
         
         if(data.type == "error")
            alert(data.data);
         
      
    );
    return false;

);

【讨论】：

我是不是要专门定位这行'header('Content-Type: application/json');'某处？因为很明显我的代码有问题，虽然你明确显示了代码，但它没有输出任何东西！！！！

它不是强制性的。只需将 data = JSON.parse(data) 放入 ajax 成功函数中。它会起作用的。

【参考方案4】：

在 ajax 成功函数中可以使用 JSON.parse(data) 来显示 JSON 数据。

这是一个例子：

Parse JSON in JavaScript?

【参考方案5】：

你的 json 编码应该是这样的：

 $json = array();
 while( $row = $statement->fetch()) 
     array_push($json, array($row['Name'], $row['PostUUID']));
 

    header('Content-Type: application/json');
    echo json_encode($json);

在您的 javascript 部分，您无需执行任何操作即可取回数据，它存储在成功函数的 data var 中。 您可以在网页上显示它并使用它做任何您想做的事情