一、服務端數據格式

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準備需要返回的數據

//測試json的輸出@RequestMapping(value="/getChildrenList")public @ResponseBody List<Children> getChildrenList(HttpServletRequest request){System.out.println("獲取前端的參數："+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請求并解析數據

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

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

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

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

測試結果如下：

方式三:請求為json方式，請求的參數格式json，返回的是json（與上面請求url不一樣，原理類似）

//請求json，輸出是json function requestJson(){$.ajax({type:'post',url:'${pageContext.request.contextPath }/requestJson.action',contentType:'application/json;charset=utf-8',//數據格式是json串，商品信息data:'{"name":"手機","price":999}',success:function(data){//返回json結果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',//數據格式是json串，商品信息data:'name=手機&price=999',success:function(data){//返回json結果alert(data.name);}});}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。