Ajax处理JSON数据参考【学习笔记】

最新推荐文章于 2023-05-30 21:27:40 发布

原创最新推荐文章于 2023-05-30 21:27:40 发布 · 567 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #ajax #javascript #php #header #服务器

JS&jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何将PHP输出的HTML文本转换为JavaScript对象，并通过AJAX接收和处理这些对象，最终更新HTML页面。重点在于使用eval()和JSON.parse()方法将JSON文本转换为JavaScript对象，以及正确设置Content-Type头确保数据格式正确。

大致思路：php返回来的是字符串，通过aval或者json解析器转换成javascript对象，然后读取对象里的值，并进行处理（如写回html页面）

注意点：

1、php页面输出格式应该是text/html，而不是xml。即应该指定：

header("Content-Type:text/html;charset=utf-8");

2、ajax接收数据时应使用responseText，而不是responseXML。

==方法1=====================eval=====================

// 示例：首先生成一段json格式的字符串，保存在txt变量中

// ajax从php程序读取过来的也是一样：

// 类似于二维数组时，用方括号框起来

var txt = '{ "employees" : [' +
    '{ "firstName":"Bill" , "lastName":"Gates" },' +
    '{ "firstName":"George" , "lastName":"Bush" },' +
    '{ "firstName":"Thomas" , "lastName":"Carter" } ]}';

//JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

    var obj = eval ("(" + txt + ")");   // 固定的写法
<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>
<script type="text/javascript">
document.getElementById("fname").innerHTML = obj.employees[1].firstName
document.getElementById("lname").innerHTML = obj.employees[1].lastName
</script>

==方法2=====================JSON.parse=====================

//使用 JSON 解析器JSON.parse将JSON数据转换为 JavaScript 对象是更安全的做法。

//JSON 解析器只能识别 JSON 文本，而不会编译脚本。

<p>
First Name: <span id="fname"></span><br /> 
Last Name: <span id="lname"></span><br /> 
</p>

<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';
var obj = JSON.parse(txt);
document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>

==备注：=============================================

1、遍历：

for(var i=0; i < obj.length; i++) {
    // 执行代码
}

2、如果服务器返回的json是多组数据，其格式如下，每组数据的样式不一定要求一致：

    $info="
        [
            {"属性名":''属性值","属性名":''属性值",...},
            {"属性名":''属性值","属性名":''属性值",...},
            ......
        ]";
//转成对象：
    var obj=eval("("+xmlHttpRequest.responseText+")");
//通过obj[i].属性名可以取得任意位置的属性值，很类似数组的使用。