服务器之家

服务器之家 > 正文

如何利用javascript接收json信息并进行处理

时间:2021-08-09 16:51     来源/作者:杜小白Zero

javascript接收处理json信息

ajax获得接口信息,javascript本身处理json信息;

通过eval()把接收的json字符串变成真实的对象信息。

提供的json接口数据01.php:

?
1
2
3
4
<?php
header("content-type:text/html;charset=utf-8");
//制作一个json信息
echo '{"city":"北京","temp":"9","WD":"西南风"}';

客户端接收处理json信息,要通过eval()把字符串的json变为object的json;

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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接收json信息并进行处理

如何利用javascript接收json信息并进行处理

如何把js的字符串变为js的对象:

?
1
2
3
4
5
//在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信息内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://blog.csdn.net/DFF1993/article/details/81132332

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部