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

发布时间：2020-12-16 03:04:19 所属栏目：百科来源：网络整理

导读：一、服务端数据格式 1.自定义po类 package?com.hbut.ssm.po;?? ?? /**? ?*?pojo类? ?*? ?*/?? public? class?Children?{?? ?? ???? private?String?name;?? ???? private?Integer?age;?? ???? private?String?gender;?? ?????? ???? public?Children(String?

一、服务端数据格式

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);??
????????}??
??????????
????});??
??????
}??

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!