JQuery中实现Ajax与服务器通过JSON交互数据

JQuery中实现Ajax与服务器通过JSON交互数据

1.JQuery中的简单的使用ajax。

Js代码

1. $.ajax({ //一个Ajax过程    
2.     type: "post", //以post方式与后台沟通    
3.     url : "get_location_by_id", //与此页面沟通    
4.     data: 'device_id=' + this.nextSibling.id,    
5.     beforeSend: function(){   
6.         var win = $.messager.progress({   
7.                 title:'Please waiting',   
8.                 msg:'Loading data...'  
9.             });   
10.     },   
11.     complete: function(){   
12.         //AJAX请求完成时隐藏loading提示   
13.         $(document).ready(function(){$.messager.progress('close');});   
14.     },   
15.     success : function(msg) {   
16.         //更新数据   
17.         if (msg != "") {   
18.             var total = eval(msg);   
19.             if(total.length == 0){   
20.                 change_map_default();   
21.                 $.messager.show({   
22.                     title:'友情提示：',   
23.                     msg:'不好意思，你的这个设备还没有地理位置的记录。',   
24.                     timeout:5000,   
25.                     showType:'slide'  
26.                 });   
27.             }   
28.             for ( var index = 0; index < total.length; index++) {   
29.                 if (index == 0) {   
30.                     change_map(total[index].longitude, total[index].latitude);   
31.                 } else {   
32.                     addPolyline(total[index - 1].longitude, total[index - 1].latitude,   
33.                             total[index].longitude, total[index].latitude);   
34.                 }   
35.                 var myCompOverlay = new ComplexCustomOverlay(   
36.                         new BMap.Point(total[index].longitude, total[index].latitude),   
37.                         total[index].time, "地点为：（" + total[index].longitude + "，" + total[index].latitude + "）");   
38.                 mp.addOverlay(myCompOverlay);   
39.                 add_marker(total[index].longitude, total[index].latitude);   
40.             }   
41.         }   
42.     }   
43. });  

2.各种浏览器对childNodes的解析不同，要特别注意。

3.百度地图api使用，在自己网页中添加百度地图。

Js代码

1. function change_map(longitude, latitude) {   
2.     var mp = new BMap.Map("container");   
3.     var point = new BMap.Point(longitude, latitude);   
4.     mp.centerAndZoom(point, 15);   
5.     mp.enableScrollWheelZoom();   
6.     mp.enableKeyboard();   
7.     mp.enableContinuousZoom();   
8.     mp.enableInertialDragging();   
9.     mp.addControl(new BMap.NavigationControl());   
10.     mp.addControl(new BMap.ScaleControl());   
11.     mp.addControl(new BMap.OverviewMapControl());   
12.     window.mp = mp;   
13. }  

4.百度地图添加折线。

Js代码

1. //向地图中添加线函数   
2. function addPolyline(from_longitude, from_latitude , to_longitude, to_latitude) {   
3.     var line = new BMap.Polyline( [ new BMap.Point(from_longitude, from_latitude),   
4.             new BMap.Point(to_longitude, to_latitude) ], {   
5.         strokeStyle : "dashed",   
6.         strokeWeight : 2,   
7.         strokeColor : "blue",   
8.         strokeOpacity : 0.6   
9.     });   
10.     mp.addOverlay(line);   
11. }