前端数据交互之json&ajax
json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式。
json的作用：在不同的系统平台，或不同编程语言之间传递数据。
// json数据的对象格式：
{ "name":"tom", "age":18}
// json数据的数组格式：
["tom",18,"programmer"]
复杂的json格式数据可以包含对象和数组的写法。
1 { 2 "name":"小明", 3 "age":200, 4 "fav":["code","eat","swim","read"], 5 "son":{ 6 "name":"小小明", 7 "age":100, 8 } 9 } 10 11 // 数组结构也可以作为json传输数据。
json数据可以保存在.json文件中，一般里面就只有一个json对象
总结概述:
1. json文件的后缀是json 2. json文件一般保存一个单一的json数据对象 3. json数据的属性不能是方法或者undefined，属性值只能：数值、字符串、对象和数组 4. json数据只使用双引号、每一个属性成员之间使用逗号隔开，并且最后一个成员没有逗号。 { "name":"小明", "age":200, "fav":["code","eat","swim","read"], "son":{ "name":"小小明", "age":100 } }
| 方法 | 参数 | 返回值 | 描述 |
|---|---|---|---|
| stringify | json对象 | 字符串 | json对象转成字符串 |
| parse | 字符串 | json对象 | 字符串格式的json数据转成json对象 |
示例代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var json_obj = {
"name":"小明",
"age":200,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100
}
};
// json对象转换成字符串格式的json数据
var data_str = JSON.stringify(json_obj);
console.log( data_str );
// 字符串格式的json数据转换成json对象
var data_json = JSON.parse(data_str);
console.log( data_json );
</script>
</head>
<body>
</body>
</html>
结果如下:
ajax，一般中文称之为："阿贾克斯"，是英文 “Async Javascript And Xml”的简写，译作：异步js和xml数据传输数据。
开发中ajax是很常用的技术，主要用于操作后端提供的数据接口，从而实现网站的前后端分离。
ajax技术的原理是实例化js的XMLHttpRequest对象，使用此对象提供的内置方法就可以与后端进行数据通信。
2.1 数据接口
数据接口，也叫api接口，表示后端提供操作数据/功能的url地址给客户端使用。
客户端通过发起请求向服务端提供的url地址申请操作数据【操作一般：增删查改】,同时在工作中，大部分数据接口都不是手写，而是通过函数库/框架来生成。
在开发Web应用中，有两种应用模式：
-
前后端不分离
前后端分离
ajax的使用必须与服务端程序配合使用，但是目前我们先学习ajax的使用，所以暂时先不涉及到服务端python代码的编写。因此，我们可以使用别人写好的数据接口进行调用。
jQuery将ajax封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。
请求形式:
1. 发送ajax请求，要通过$.ajax()，参数是对象，里面有固定的参数名称。
$.ajax({
"url":"数据接口url地址",
"method":"http请求方式，前端只支持get和post",
"dataType":"设置服务器返回的数据格式，常用的json，html，jsonp，默认值就是json",
// 要发送给后端的数据参数，post时，数据必须写在data，get可以写在data,也可以跟在地址栏?号后面
"data":{
"数据名称":"数据值",
}
}).then(function(resp){ // ajax请求数据成功时会自动调用then方法的匿名函数
console.log( resp ); // 服务端返回的数据
}).fail(function(error){ // ajax请求数据失败时会自动调用fail方法的匿名函数
console.log( error );
});
2. ajax的使用往往配合事件操作进行调用。
详细示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> $(function(){ $("#btn").on("click",function(){ $.ajax({ // 后端程序的url地址 url: 'http://wthrcdn.etouch.cn/weather_mini', // 也可以使用method，提交数据的方式，默认是'GET'，常用的还有'POST' type: 'get', dataType: 'json', // 返回的数据格式，常用的有是'json','html',"jsonp" data:{ // 设置发送给服务器的数据，如果是get请求，也可以写在url地址的?后面 "city":'深圳', } }) .done(function(resp) { // 请求成功以后的操作 $('#ganmao').html(resp.data.ganmao) }) .fail(function(error) { // 请求失败以后的操作 console.log(error); }); }); }) </script> </head> <body> <button id="btn">点击获取数据</button> <p id="ganmao"></p> </body> </html>
另外两种jquery的简写形式:
// 发送get请求
// 参数1：数据接口的请求地址
// 参数2：发送给接口地址的数据参数
// 参数3：ajax请求成功以后，调用的匿名函数，匿名函数的第一个参数还是服务端返回的数据
// 参数4：设置服务端返回的数据格式，告诉给jQuery
$.get("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
// 发送post请求
// 参数1：数据接口的请求地址
// 参数2：发送给接口地址的数据参数
// 参数3：ajax请求成功以后，调用的匿名函数，匿名函数的第一个参数还是服务端返回的数据
// 参数4：设置服务端返回的数据格式，告诉给jQuery
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
