高德地图和echarts结合实现地图下钻（二）

一、学习ajax发送异步请求

 1     $(function(){
 2         //请求参数
 3         var list = {};
 4         //
 5         $.ajax({
 6             //请求方式
 7             type : "POST",
 8             //请求的媒体类型
 9             contentType: "application/json;charset=UTF-8",
10             //请求地址
11             url : "http://127.0.0.1/admin/list/",
12             //数据，json字符串
13             data : JSON.stringify(list),
14             //请求成功
15             success : function(result) {
16                 console.log(result);
17             },
18             //请求失败，包含具体的错误信息
19             error : function(e){
20                 console.log(e.status);
21                 console.log(e.responseText);
22             }
23         });
24     });

$.ajax()

该方法用于执行Ajax请求，常用于其他jQuery Ajax方法不能完成的请求，也许我们可以把它称为"jQuery中Ajax系列方法之母"。

形式：$.ajax({name:val, name:val,...});
可选字段：
1）url：链接地址，字符串表示
2）data：需发送到服务器的数据，GET与POST都可以，格式为{A: '...', B: '...'}
3）type："POST" 或 "GET"，请求类型
4）timeout：请求超时时间，单位为毫秒，数值表示
5）cache：是否缓存请求结果，bool表示
6）contentType：内容类型，默认为"application/x-www-form-urlencoded"
7）dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
8）success：请求成功后，服务器回调的函数
9）error：请求失败后，服务器回调的函数
10）complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用
11）async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行
12）username：访问认证请求中携带的用户名，字符串表示
13）password：返回认证请求中携带的密码，字符串表示

解释一下data和dataType的区别：

ajax本质上就是针对一个url发送一个请求之后，url所在的服务器和ajax的数据进行交互，

那么data就是发送请求的时候ajax可以带着数据一起发送给服务器，dataType一般是不用写的，

这是预先猜测或者解析服务器返回的数据类型，比如服务器返回了json类型的一组数据。

数据格式

浏览器与服务器之间传输数据所采用的格式，比较常见的有xml，html，text，json，jsonp等，目前json由于占用更小存储，

且是JavaScript原生格式，因此很受欢迎。

当确定数据传输采用json格式后，下面就需要考虑序列化问题了。

网络中传输的都是文本字符串（其实是二进制比特流，这里方便理解），因此在向网络通道中写入数据时，

都需要先序列化json对象为文本字符串。而从网络通道中读取数据时，都需要反序列化文本字符串为json对象。

在Python中json.dumps用于序列化，json.loads用于反序列化。

如果确定数据格式是json，JS也需对服务器返回的数据进行反序列化，即把json样式的字符串变成json对象。

1 var json_str = '{"result": "hello, world!"}';
2 var json_object = eval("(" + json_str + ")");  // 法一，使用eval函数，注意括号
3 var json_object = jQuery.parseJSON(json_str);  // 法二，使用jQuery的parseJSON函数
4
5 alert(json_object.result);                     // 反序列化成功，输出结果

Json对象和Json字符串解释

json对象可以通过javascript存取属性！json对象装成json字符串经常用于前后台传输数据！

如果你在前台使用，那么Json对象可以通过xx.name来调用，如果是字符串，那么就是字符串了

ajax中，我们自己拼接的是一个JSON对象，以为它是无数据类型的，所以JS根据其格式默认其实对象，

你要是往后台发，要先把它转换成JSON字符。

从ajax的服务器发过的，一定是字符串，你想要把它解析，很简单，把它先变成JSON对象才行。

在数据传输过程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，

JSON对象和JSON字符串之间的相互转换是关键。例如：
JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }';
JSON对象:
var str2 = { "name": "cxh", "sex": "man" };

JSON字符串转换为JSON对象

要使用上面的str1，必须使用下面的方法先转化为JSON对象：

//由JSON字符串转换为JSON对象

var obj = eval('(' + str + ')');

或者

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

或者

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

然后，就可以这样读取：

Alert(obj.name);

Alert(obj.sex);

特别注意：如果obj本来就是一个JSON对象，那么使用eval（）函数转换后（哪怕是多次转换）还是JSON对象，

但是使用parseJSON（）函数处理后会有问题（抛出语法异常）。

可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串。

例如：

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

或者

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

转载自：https://www.cnblogs.com/laopo/p/11241633.html

原文链接：https://blog.csdn.net/jinixin/article/details/80042763

Tomorrow the birds will singing.