Javascript 如何在AJAX中输出Json数据

在native JS中，我只知道如何使用AJAX将PHP/mySql的结果输出到元素“some_id”中，如下所示：

<script>
function addItem(value) {
      xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("some_id").innerHTML = xmlhttp.responseText;
                                                                }
                                                 }
      xmlhttp.open("GET","some_php.php?q="+value,true);
      xmlhttp.send();
                 }
</script>

{
    "response": "This is a test response"
}

函数附加项（值）{
xmlhttp=新的XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（“some_id”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”，“some_php.php？q=“+value，true”）；
xmlhttp.send（）；
}

但是，如果PHP/mySQL的结果是Json编码的，那么如何将其输出到AJAX中的“some_id”？

首先使用以下命令解析Json：

如果您的回答如下所示：

<script>
function addItem(value) {
      xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("some_id").innerHTML = xmlhttp.responseText;
                                                                }
                                                 }
      xmlhttp.open("GET","some_php.php?q="+value,true);
      xmlhttp.send();
                 }
</script>

{
    "response": "This is a test response"
}

使用类似的方法：

<script>
function addItem(value) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //Convert from a string to a javascript object
            var json = JSON.parse(xmlhttp.responseText);
            document.getElementById("some_id").innerHTML = json.response;
        }
    }
    xmlhttp.open("GET","some_php.php?q="+value,true);
    xmlhttp.send();
}
</script>

函数附加项（值）{
xmlhttp=新的XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
//从字符串转换为javascript对象
var json=json.parse（xmlhttp.responseText）；
document.getElementById（“some_id”）.innerHTML=json.response；
}
}
open（“GET”，“some_php.php？q=“+value，true”）；
xmlhttp.send（）；
}

//some_php.php
$value=$_POST['value']；
echo json_encode（$value）；//将数据转换为json数据
函数附加项（值）{
$.ajax({
类型：“POST”，
url:“some_php.php”，
数据类型：“json”，
数据：{value:value}，
成功：功能（res）{
console.log（res）；//res是json格式的，无需转换
}
});
}

我假设您已经从MySQL数据库获取了数据。 让我举几个字段的例子

yourdata.php

现在在有Ajax的文件中

var xhttp = new XMLHttpRequest( );
// the rest of your code here as you have implemented it
// where you get response.text , do this
var data = xhttp.responseText;
var myData = data.toString( );
var jsonObject = JSON.parse( myData );
// you can obtain each value from the json object
document.getElementById( 'divEmail' ).innerHTML = jsonObject.email;
document.getElementById( 'divPhone' ).innerHTML = jsonObject.phone;

在用JavaScript解析数据之前对其进行字符串化的原因是，JavaScript往往不理解用PHP编码的json数据（我认为），因为这样做会在JavaScript中产生错误

var myData = JSON.Parse( xhttp.responseText );

---

我在旅行中回答了这个问题，这就是为什么你在那里看到很多评论，希望这能有所帮助。

如果是JSON编码的，请先解码。使用

JSON.parse