码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2018-06-13 15:13:06      阅读：199      评论：0      收藏：0      [点我收藏+]

标签：ready   sso   alt   let   public   ext   document   html   技术分享   

一、服务端数据格式

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. }  

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

标签：ready   sso   alt   let   public   ext   document   html   技术分享   

原文地址：https://www.cnblogs.com/guokezhiren/p/9176858.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！