本文介绍如何使用 JavaScript 通过 AJAX 获取接口返回的 JSON 字符串,并利用 eval 函数将其转换为 JavaScript 对象。文章包含 PHP 后端生成 JSON 数据的示例以及前端客户端接收并处理数据的完整代码,展示了字符串到对象的具体转换过程。
JavaScript 接收与处理 JSON 数据的方法
JavaScript 接收并处理 JSON 信息
通常通过 AJAX 获取接口返回的数据,随后由 JavaScript 对 JSON 信息进行后续处理;
利用 eval() 函数将接收到的 JSON 字符串转换为实际的 JavaScript 对象。
后端 JSON 数据生成示例
示例中提供的 JSON 接口数据文件 01.php:
<?php
header("content-type:text/html;charset=utf-8");
//制作一个json信息
echo '{"city":"北京","temp":"9","WD":"西南风"}';
客户端接收与对象转换
客户端接收并处理 JSON 信息时,需通过 eval() 将字符串格式的 JSON 转换为对象格式的 JSON;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript接收处理json</title>
<script type="text/javascript">
function getweather(){
//ajax去请求接收json信息
//js做后期处理
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
//alert(typeof xhr.responseText);//string
//把接收的字符串json具体变为object的json对象
eval("var jn_info="+xhr.responseText);
console.log(jn_info);
console.log(jn_info.city);//北京
console.log(jn_info.WD);//西南风
console.log(jn_info.temp);//9
}
}
xhr.open('get','./01.php');
xhr.send(null);
}
//在javascript里边,把字符串“string”变为对象“object”
//var obj = "{name:'kitty',age:5}";
//eval(字符串参数) 字符串参数变为表达式运行
//eval("var cat="+obj); //eval("var cat={name:'kitty',age:5}")
//console.log(cat);
</script>
</head>
<body>
<h2>接收json信息</h2>
<input type="button" value="获得天气" onclick="getweather()">
</body>
</html>
执行效果如下:


字符串转对象的具体实现
如何将 JavaScript 字符串转换为 JavaScript 对象:
//在javascript里边,把字符串“string”变为对象“object”
var obj = "{name:'kitty',age:5}";
//eval(字符串参数) 字符串参数变为表达式运行
eval("var cat="+obj); //eval("var cat={name:'kitty',age:5}")
console.log(cat);
至此,关于如何利用 JavaScript 接收并处理 JSON 信息的介绍完毕,更多相关 JavaScript 接收处理 JSON 信息内容请搜索本站以前的文章或继续浏览下面的相关文章,希望大家以后多多支持本站!