JSON数据格式----- JavaScript与JSON、JavaScript的JSON对象、构建JSON格式数据

JavaScript与JSON

JSON是一种语法,用来序列化对象、数组等的。它只是基于JavaScript语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zWMcpKTa-1599703206802)(1-7.png)]

JSON格式的字符串就是指在JavaScript语言中内容格式符合JSON格式的字符串的数据

这样字符串的但引号就确定了 最外面是单引号 因为json必须是双引号

var jsonText='{"name":"xxx","abc":"wwwwsss"}'

JSON格式的对象就是指JSON格式在JavaScript语言中的具体表现形式为对象或者数组

var jsonObject = {
    
    
	"name":"xxx",
	"abc":"wwwwsss"
}
var jsonObject2 = [1,2,3,4];

JavaScript的JSON对象

JSON对象该对象用于实现字符串与对象之间的转换

JSON.pares() :解析JSON字符串并返回对应的值 字符串转JSON格式的对象

JSON.stringify():返回与指定值对应的JSON字符串 对象转JSON格式的字符串

    var jsonString = '{"name":"zhangwuji"}';
    var jsonObject = JSON.parse(jsonString);
    console.log(jsonObject);

    var jsonResult = JSON.stringify(jsonString);
    console.log(jsonResult)

对于有些老版本的浏览器不支持json的 需要下载json2.js 把他放在你的项目中 并且在需要的地方引入这个文件

构建JSON格式数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">request</button>
</body>
<script src="../9.2/创建XMLHTTPRequest对象.js"></script>
<script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click',function(){
     
     
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function(){
     
     
            if(xhr.readyState === 4 && xhr.status === 200){
     
     
                var data = xhr.responseText;//接收数据  responseText接收的是个字符串
                var json = JSON.parse(data);//通过JSON的内置方法 将字符串格式的json内容转换为对象格式的
                console.log(json);
            }
        }

        xhr.open('post','server.json');
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        var obj = {
     
     
            name:'xxx',
            age:44
        }
        //将json格式的字符串转换为符合请求数据的格式
        //最简单的方法就是 直接用对象进行拼串
        xhr.send(`name=${
       
       obj.name}&age=${
       
       obj.age}`);
    })
</script>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_44492275/article/details/108508090
今日推荐