一、服務(wù)端數(shù)據(jù)格式

1.自定義po類

package com.hbut.ssm.po;/*** pojo類**/ public class Children {private String name;private Integer age;private String gender;public Children(String name, Integer age, String gender) {super();this.name = name;this.age = age;this.gender = gender;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}public String getGender() {return gender;}public void setGender(String gender) {this.gender = gender;}}
2.controller準(zhǔn)備需要返回的數(shù)據(jù)

//測試json的輸出@RequestMapping(value="/getChildrenList")public @ResponseBody List<Children> getChildrenList(HttpServletRequest request){System.out.println("獲取前端的參數(shù)："+request.getParameter("name"));List<Children> childrenList= new ArrayList<Children>();childrenList.add(new Children("張三", 25, "男"));childrenList.add(new Children("李四", 28, "男"));childrenList.add(new Children("小紅", 22, "女"));return childrenList;}
二、ajax請求并解析數(shù)據(jù)

方式1:不帶參數(shù) ?$ajax(url，callback)，即第一個參數(shù)是請求的url，第二個參數(shù)是回調(diào)用函數(shù)，json數(shù)據(jù)封裝在result，需要對result的json數(shù)據(jù)進行解析

$(document).ready(function(){$("button").click(function(){$.ajax({url:"http://localhost:8080/ssm01/getChildrenList.action",success:function(result){//eval函數(shù)解析json數(shù)據(jù)var array=eval(result);var texts="解析json數(shù)據(jù)如下:<br>";for(var i=0;i<array.length;i++){texts+=array[i].name+"--"+array[i].age+"---"+array[i].gender+";<br>";}$("#div1").html(texts);}});});});

方式2:帶參數(shù) ?$.post(url，data,callback)，即第一個參數(shù)是請求的url，第二個參數(shù)是請求參數(shù)，第三個參數(shù)是回調(diào)用函數(shù)，json數(shù)據(jù)封裝在result，需要對result的json數(shù)據(jù)進行解析

$(document).ready(function(){$("button").click(function(){$.post("http://localhost:8080/ssm01/getChildrenList.action",{name:"菜鳥教程",url:"http://www.runoob.com"},function(data,status){//eval函數(shù)解析json數(shù)據(jù)var array=eval(data);var texts="解析json數(shù)據(jù)如下:<br>";for(var i=0;i<array.length;i++){texts+=array[i].name+"--"+array[i].age+"---"+array[i].gender+";<br>";}$("#div1").html(texts);});});});

測試結(jié)果如下：

方式三:請求為json方式，請求的參數(shù)格式j(luò)son，返回的是json（與上面請求url不一樣，原理類似）

//請求json，輸出是json function requestJson(){$.ajax({type:'post',url:'${pageContext.request.contextPath }/requestJson.action',contentType:'application/json;charset=utf-8',//數(shù)據(jù)格式是json串，商品信息data:'{"name":"手機","price":999}',success:function(data){//返回json結(jié)果alert(data);}});}
方式四:請求為key、value方式，返回的是json，（與上面請求url不一樣，原理類似）

//請求key/value，輸出是json function responseJson(){$.ajax({type:'post',url:'${pageContext.request.contextPath }/responseJson.action',//請求是key/value這里不需要指定contentType，因為默認就 是key/value類型//contentType:'application/json;charset=utf-8',//數(shù)據(jù)格式是json串，商品信息data:'name=手機&price=999',success:function(data){//返回json結(jié)果alert(data.name);}});}

總結(jié)

以上是生活随笔為你收集整理的ajax的常见几种写法以及用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。