文章/答案/技术大牛

发布

社区首页 >专栏 >JSON與ajax使用方法

JSON與ajax使用方法

用户9857551

发布于 2022-06-28 00:33:40

1.1K0

文章被收录于专栏：Angular学习规划Angular学习规划

JSON：JavaScript 对象表示法（JavaScript Object Notation

是存储和交换文本信息的语法。类似 XML。比 XML 更小、更快，更易解析。 JSON 是一种数据格式。它本身是一串字符串，只是它有固定格式的字符串，符合这个数据格式要求的字符串，我们称之为JSON。 JSON 常用来数据传输，因为它易于程序之前读写操作。 JSON 它其实是来自JavaScript对对象（Object）的定义。但是它作为数据格式来使用的时候，和JavaScript没有任何关系，它只是参照了JavaScript对对象定义的数据格式。 JSON 它可以服务任何语言，C、C++、Java、Objective-C、Python、Go、等，在各个语言中的字典、Map和JSON是类似的结构，所以它们之间可以相互转换。 JSON键值对数据结构如上图，以 “{” 开始，以 “}” 结束。中间包裹的为Key : Value的数据结构。

{"name":"sojson"}

JSON 值范围

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

json的使用

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。创建包含 JSON语法的 JavaScript 字符串：

var txtJson = '{ "star_male" : [' +
'{ "name":"鹿晗" , "age":26 },' +
'{ "name":"李易峰" , "age":29 },' +
'{ "name":"陈赫" , "age":31 } ]}';

eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

var obj = eval ("(" + txtJson + ")");

总结就是：

var txtJson = '{ "star_male" : [' +
'{ "name":"鹿晗" , "age":26 },' +
'{ "name":"李易峰" , "age":29 },' +
'{ "name":"陈赫" , "age":31 } ]}';

//利用函数 eval() 转换成JSON对象
var obj = eval ("(" + txtJson + ")");

//输出数组的第一个对象的name值
alert("得到的值：" + obj.star_male[0].name);

常见的 JSON 格式

{"key":"value"}，最简单的JSON 格式。
{"key1":"value1","key2":"value2"}，一个JSON中有多个键值对的表达方式。
{"key":["a","b","sojson.com"]}，value是一个Array 的JSON格式。
{"sojson":["5年","JSON在线解析","sojson.com",true,1,null]}，value是一个Array 的JSON格式，并且这个数组中有多重类型的元素，有String，Boolean，Number，null。
{"key":{"json":"json for javascript"}}，value 是JSONObject的JSON格式。

JSON 对象 & JSONObject

JSON 语法是 JavaScript 对象的表达方式，我们又简单的分为JSONObject 和 JSONArray 其实都是JSON 对象的表达方式，只是从结构上做了区分。 JSON 对象语法规则

数据在名称/值对中，如{"domain":"sojson.com"}
可以多对键值对，如{"domain":"sojson.com","author":"soゝso","email":"i@itboy.net"}
值里面可以有数组（Array），如{"domain_array":["sojson.com","soso.pub","soso.run","isoso.xin","isoso.xin"]}

JSON 使用 JavaScript 获取元素值

因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。

var json =  {
        "name": "本兮",
        "age": "22"
}
var name = json.name;
alert("name：" + json.name);
var age = json.age;
alert("age：" + json.age);

JSON对象特殊处理

当我们对象里有特殊的Key，或者不是字符串的Key，处理起来稍微有点麻烦。

var json = {
    "1": {
        "name": "本兮",
        "age": "22"
    },
    "2": {
        "name": "关晓彤",
        "age": "20"
    }
};
alert(json.1.name);// X 错误 throw Uncaught SyntaxError;
//正确的打开姿势如下：
alert(json[1].name);
alert(json["1"].name);
alert(json["1"]["name"]);
//错误，undefined
alert(json["1"][name]);

JSON 数组 && JSONArray

JSON数组是在JSON对象中延伸出来的，多个JSON对象就是一个JSON数组，数据之间由逗号分隔，花括号保存对象，方括号保存数组。 JSON数组语法规则

JSONArray 最外层是“[”和“]”包裹起来的：如[{"domain":"sojson.com"}]。
JSONArray 是由一个或多个 JSONObject 组合起来的：如[{"domain":"sojson.com"},{"age":"5年"}]。
多个 JSONObject 由逗号分隔。
JSONArray 取值通过下标或者迭代获取每一个element：如[{"domain":"sojson.com"},{"age":"5年"}][0].domain。
上面的[{"domain":"sojson.com"},{"age":"5年"}][0].domain后面跟着“[0]”就是获取第一个元素（JSONObject），然后取它的name属性。

舉例：

var jsonArray = [{"domain":"sojson.com"},{"age":"5年"}];
alert(jsonArray[0].domain);//sojson.com

JSON 使用 JavaScript 获取元素值

因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。

通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：

var star_male =  [
    {
        "name": "鹿晗",
        "age": "26"
    },
    {
        "name": "李易峰",
        "age": "29"
    },
    {
        "name": "陈赫",
        "age": "31"
    }
]
var name = star_male[0].name;
alert(name);

迭代获取Array里所有的值：

{
	for(var i in star_male){
		alert("name:" + star_male[i].name);
		alert("age:" + star_male[i]['age']);//换个姿势
	}
	//再换个姿势，下面写法和上面的效果是一样的。
	/*
	for(var i=0;i <star_male.length;i++){
		alert("name:" + star_male[i].name);
		alert("age:" + star_male[i]['age']);//换个姿势
	}*/
}

JSON.parse() 语法

JSON.parse()是Javascript中一个常用的 JSON 转换方法，JSON.parse()可以把JSON规则的字符串转换为JSONObject，JSON.parse()很方便，并且几乎支持所有浏览器。外面被引号包裹起来了，证明它就是个字符串，而不是JSON对象，那么我们要转换，这个时候JSON.parse() 就可以派上用场了。

var json = JSON.parse('{"domain" : "sojson.com","author":"soso"}');
alert("json.domain = " + json.domain);
//alert(json['domain']);//或者这样也可以

JSON.stringify()

JSON.stringify()是Javascript中一个常用的内置 JSON 转换方法，JSON.stringify()可以把JSONObject 转化为 JSON 规则的字符串转换为，JSON.stringify()很方便，并且几乎支持所有浏览器。

JSON.stringify(value[, replacer[, space]])

参数
value	将要序列化成 一个JSON 字符串的值。	必选
replacer	如果是一个function，那么每个序列化成JSON的value都会经过这个function，如果是一个Array，那么序列化后的JSON字符串中的Key在这个数组中才会加入到返回的JSON 字符串中去。	可选
space	用于美化JSON字符串，如果是一个Number类型，代表的就是多少个空格。如果是0或者小于0，那么就是没有空格（和不填此项没有区别），如果是字符串，那么直接填充。	可选

JSON.stringify() JSON To String

var json = {"domain" : "sojson.com","author":"soso"}
alert(JSON.stringify(json));

JSON.stringify() replacer参数(1)

replacer参数可以是function，也可以是Array，如果是function，他接收的参数有2个，第一个是Key，第二个是Value。

replacer function返回值说明：

如果返回一个 Number, 转换成相应的字符串被添加入JSON字符串。
如果返回一个 String, 该字符串作为属性值被添加入JSON。
如果返回一个 Boolean, “true” 或者 "false"被作为属性值被添加入JSON字符串。
如果返回undefined，该属性值不会在JSON字符串中输出。

var json = {"domain" : "sojson.com","author":"soso"}
json = JSON.stringify(json, function(key,value){
	if(key == "domain"){
		return undefined;//踢出domain
	};
    return value;
});

如参数replacer是一个数组，序列化结果集的Key只输出命中的，miss的属性过滤。

var json = {"domain" : "sojson.com","author":"soso"}
json = JSON.stringify(json, ['author']);
 alert("JSON = " + json);//结果只留下了命中Key的元素组合。

Ajax与JSON详细讲解，Ajax传递JSON数据与Ajax接受JSON数据

Ajax传递JSON数据 Ajax原生的JavaScript写法分为六步：

1.创建Ajax request对象 2.绑定监听回调函数 3.打开一个Ajax请求 4.设置请求头（setRequestHeader），具体要设置什么请求头，这个看业务需要。 5.发送请求。 6.接受请求。

//1.创建ajax request对象
var request = new XMLHttpRequest();
//2.绑定监听回调函数
request.onreadystatechange = function(){
    //判断返回状态是否正常
    if(request.readyState ===4 &&request.status === 200){
        //6.接收数据
        var res = request.responseText;
        //输出数据
        console.log('返回值',res);
    }else{
        //错误
        console.log('error');
    }
};

/**
 * 3.打开请求
 * 第一个参数为请求方式，常用可选为 GET/POST，还有DELETE、UPDATE、OPTIONS等
 * 第二个参数为请求的链接，可以是相对路径和绝对路径。
 * 第三个参数设置请求为同步还是异步，true为异步，false为同步
 */
request.open("POST","https://cdn.sojson.com/file/demo-json.json",true);
/**
 * 4. setRequestHeader 方法可以设置请求头，这个看业务需要，这里设置为表单提交
 */
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
/**
 * 5.发送请求
 *
 * GET请求方式：request.send();
 *
 * POST请求方式：可以传参，可以是字符型的JSON或者 ？和 &方式如下：
 * request.send("name=Alice&age=23");
 * //这个方式如果后端接受不到参数，请把请求头改成 "Content-type","application/json"
 *
 *
 *
 */
//发送JSON数据
request.send('{"name":"Alice","age":23}');

Ajax接受JSON数据

Ajax接受JSON数据，是表示被请求方返回为JSON数据，前端需要接收数据，并且解析数据。

Ajax 步骤还是和上面一样，还是6个步骤，我们直接看代码。

//1.创建ajax request对象
var request = new XMLHttpRequest();
//2.绑定监听回调函数
request.onreadystatechange = function(){
    //判断返回状态是否正常
    if(request.readyState ===4 &&request.status === 200){
        //6.接收数据
        var res = request.responseText;
        //输出数据
        console.log('返回值',res);

        /**
         * 如果返回来的参数是JSON，就可以直接转换。
         */
        var json = JSON.parse(res);
        console.log('返回值-转换JSON对象',json);
        console.log('demo:',json.demo);
        console.log('Name:',json.Name);
        console.log('Birthday:',json.Birthday);
        console.log('Birthday:',json.Birthday);
        console.log('Birthplace:',json.Birthplace);
        console.log('Info:',json.Info);

    }else{
        console.log('error');
    }
};

/**
 * 3.打开请求
 * 第一个参数为请求方式，常用可选为 GET/POST，还有DELETE、UPDATE、OPTIONS等
 * 第二个参数为请求的链接，可以是相对路径和绝对路径。
 * 第三个参数设置请求为同步还是异步，true为异步，false为同步
 *
 * 备注：GET请求，直接把参数以 ？和 & 来传参，如 url+  ?name=Alice&age=23
 */
request.open("GET","https://cdn.sojson.com/file/demo-json.json",true);
/**
 * 4. setRequestHeader 方法可以设置请求头，这个看业务需要，这里设置为表单提交
 */
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
/**
 * 5.发送请求
 *
 * GET请求方式：request.send();
 *
 * POST请求方式：可以传参，可以是字符型的JSON或者 ？和 &方式如下：
 * request.send("name=Alice&age=23");
 * //这个方式如果后端接受不到参数，请把请求头改成 "Content-type","application/json"
 * request.send('{"name":"Alice","age":23}');
 *
 *
 */
request.send();