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

一、服务端数据格式

1.自定义po类

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

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. return childrenList;
10. }

二、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. $.ajax({
4. type:‘post‘,
5. url:‘${pageContext.request.contextPath }/requestJson.action‘,
6. contentType:‘application/json;charset=utf-8‘,
7. //数据格式是json串，商品信息
8. data:‘{"name":"手机","price":999}‘,
9. success:function(data){//返回json结果
10. alert(data);
11. }
12. });
13. }

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

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

原文地址：https://www.cnblogs.com/guokezhiren/p/9176858.html