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

一、服务端数据格式

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的常见几种写法以及用法相关推荐

ajax请求有多少种写法,Ajax 请求的三种写法
Ajax 请求简介: Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种建立交互式网页应用的网页开发 ...
Ajax 请求的三种写法
Ajax 请求简介: Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发 ...
Verilog状态机常见三种写法
1.1理论 Verilog状态机又称同步状态机(FSM,Finite State Machine),一般又叫状态机,在Verilog描述电路中大部分是同步执行(并行)的,但是很多时候需要处理明显具 ...
Javascript闭包和闭包的几种写法及用途
好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一些实用的东西,主要将闭包的写法.用法和用途. 一.什么 ...
全面理解Javascript闭包和闭包的几种写法及用途【转】
一.什么是闭包和闭包的几种写法和用法 1.什么是闭包闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. ...
全面理解Javascript闭包和闭包的几种写法及用途
一.什么是闭包和闭包的几种写法和用法 1.什么是闭包闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. ...
全面理解Javascript闭包和闭包的几种写法及用途--转载自https://www.cnblogs.com/yunfeifei/p/4019504.html...
全面理解Javascript闭包和闭包的几种写法及用途好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一 ...
Python中斐波那契数列的四种写法
在这些时候,我可以附和着笑,项目经理是决不责备的.而且项目经理见了孔乙己,也每每这样问他,引人发笑.孔乙己自己知道不能和他们谈天,便只好向新人说话.有一回对我说道,"你学过数据结构吗?&qu ...
避免常见的6种HTML5错误用法,如何避免常见的6种HTML5错误用法
一.不要使用section作为div的替代品人们在标签使用中最常见到的错误之一就是随意将HTML5的等价于 --具体地说,就是直接用作替代品(用于样式).在XHTML或者HTML4中,我们常看到这样 ...

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

ajax的常见几种写法以及用法相关推荐

最新文章

热门文章