ajax的常见几种写法以及用法

Posted 2020-11-19 晴空万里一望无际

一、服务端数据格式

1.自定义po类

1. package com.hbut.ssm.po;  
2.   
3. /** 
4.  * pojo类 
5.  * 
6.  */  
7. public class Children {  
8.   
9.     private String name;  
10.     private Integer age;  
11.     private String gender;  
12.       
13.     public Children(String name, Integer age, String gender) {  
14.         super();  
15.         this.name = name;  
16.         this.age = age;  
17.         this.gender = gender;  
18.     }  
19.     public String getName() {  
20.         return name;  
21.     }  
22.     public void setName(String name) {  
23.         this.name = name;  
24.     }  
25.     public Integer getAge() {  
26.         return age;  
27.     }  
28.     public void setAge(Integer age) {  
29.         this.age = age;  
30.     }  
31.     public String getGender() {  
32.         return gender;  
33.     }  
34.     public void setGender(String gender) {  
35.         this.gender = gender;  
36.     }  
37.       
38. }  

2.controller准备需要返回的数据

1. //测试json的输出  
2. @RequestMapping(value="/getChildrenList")  
3. public @ResponseBody List<Children> getChildrenList(HttpServletRequest request){  
4.     System.out.println("获取前端的参数："+request.getParameter("name"));  
5.     List<Children> childrenList= new ArrayList<Children>();  
6.     childrenList.add(new Children("张三", 25, "男"));  
7.     childrenList.add(new Children("李四", 28, "男"));  
8.     childrenList.add(new Children("小红", 22, "女"));  
9.       
10.     return childrenList;  
11. }  

二、ajax请求并解析数据

方式1:不带参数  $ajax(url，callback)，即第一个参数是请求的url，第二个参数是回调用函数，json数据封装在result，需要对result的json数据进行解析

1. $(document).ready(function(){  
2.     $("button").click(function(){  
3.         $.ajax({url:"http://localhost:8080/ssm01/getChildrenList.action",  
4.             success:function(result){  
5.         //eval函数解析json数据  
6.             var array=eval(result);  
7.             var texts="解析json数据如下:<br>";  
8.             for(var i=0;i<array.length;i++){  
9.                 texts+=array[i].name+"--"+array[i].age+"---"+array[i].gender+";<br>";  
10.             }  
11.             $("#div1").html(texts);  
12.         }});  
13.     });  
14. });  

 

 

方式2:带参数  $.post(url，data,callback)，即第一个参数是请求的url，第二个参数是请求参数，第三个参数是回调用函数，json数据封装在result，需要对result的json数据进行解析

1. $(document).ready(function(){  
2.     $("button").click(function(){  
3.         $.post("http://localhost:8080/ssm01/getChildrenList.action",{  
4.             name:"菜鸟教程",  
5.             url:"http://www.runoob.com"  
6.         },  
7.         function(data,status){  
8.             //eval函数解析json数据  
9.             var array=eval(data);  
10.             var texts="解析json数据如下:<br>";  
11.             for(var i=0;i<array.length;i++){  
12.                 texts+=array[i].name+"--"+array[i].age+"---"+array[i].gender+";<br>";  
13.             }  
14.             $("#div1").html(texts);  
15.         });  
16.     });  
17. });  

 

 

测试结果如下：

方式三:请求为json方式，请求的参数格式json，返回的是json（与上面请求url不一样，原理类似）

1. //请求json，输出是json  
2. function requestJson(){  
3.       
4.     $.ajax({  
5.         type:‘post‘,  
6.         url:‘${pageContext.request.contextPath }/requestJson.action‘,  
7.         contentType:‘application/json;charset=utf-8‘,  
8.         //数据格式是json串，商品信息  
9.         data:‘{"name":"手机","price":999}‘,  
10.         success:function(data){//返回json结果  
11.             alert(data);  
12.         }  
13.           
14.     });  
15.       
16.       
17. }  

方式四:请求为key、value方式，返回的是json，（与上面请求url不一样，原理类似）

1. //请求key/value，输出是json  
2. function responseJson(){  
3.       
4.     $.ajax({  
5.         type:‘post‘,  
6.         url:‘${pageContext.request.contextPath }/responseJson.action‘,  
7.         //请求是key/value这里不需要指定contentType，因为默认就 是key/value类型  
8.         //contentType:‘application/json;charset=utf-8‘,  
9.         //数据格式是json串，商品信息  
10.         data:‘name=手机&price=999‘,  
11.         success:function(data){//返回json结果  
12.             alert(data.name);  
13.         }  
14.           
15.     });  
16.       
17. }