ajax请求及参数解析

ajax请求适应有较少内容的请求实现，例如查询明细，保存明细，如果是大量的数据查询用ajax实现成本较高，最好用form表单提交。

1.用ajax实现查询表单

   1.1js

jQuery("#userQuery").bind("click", function () { var a = { name:name, numer:number }; jQuery.ajax({ type: "POST", url: "/rest/student/list", data: JSON.stringify(a), dataType: 'json', contentType: 'application/json', processData: false, cache: false, success: function (data) { if (data.success&&data.list!=null&&data.list!="") { var studentHtml=""; var temp=data.list; for (x in data.list) { //遍历JSON格式的数组取元素, x代表下标 studentHtml+='<tr><td>'+temp[x].name+'</td>'+ '<td>'+temp[x].number+'</td>'+ '<td>'+temp[x].age+'</td>'; } $("#userQuery").html(studentHtml); } else { alert(data.msg); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert("服务器忙，请稍后再试"); } }); });

1.2.后端controller

   

@Controller @RequestMapping("/student") public class StudentController extends BaseControl{ @Autowired StudentService studentService; private static final Logger logger= LoggerFactory.getLogger(StudentController.class); @RequestMapping("/list") @ResponseBody public String list(@ModelAttribute Student student,Model view){ Map<String,Object> map=new HashMap<String,Object>(16); try { StudentQuery query = new StudentQuery(); query.setName(student.getName()); query.setNumber(student.getNumber); List<Student> students= studentService.search(query); map.put("list", students); map.put("success",true); } catch (Exception e) { logger.error("search student error", e); } Gson gson=new Gson(); return gson.toJson(map); } }

   1.3 ajax的参数解析

参数名称类型说明举例urlString发送请求的地址 data

object类型

或String类型

object类型是key-value键值对

object类型：{name:"name",numer:"number"}

String类型：JSON.stringify(a)

typeString请求方式post或get"post"dataType

String

字符串类型

指ajax执行完成返回值的类型

xml：返回XML文档

html：返回纯文本HTML信息，包含的script标签会在插入DOM时执行

script：返回纯文本的JavaScript代码。

json:返回json数据。

jsonp：JSONP格式

text：返回纯文本字符串

 

contentType

ajax输入参数

的类型，与

dataType相对应

1."application/x-www-form-urlencoded" (默认值)，默认值可以设置contentType: false；默认值可以适合大部分的场合

2."application/json; charset=utf-8"  要求data必须是字符串：JSON.stringify(a)

3.当data为json格式{name:"name",numer:"number"},设置contentType: false

 

 

 asyncBoolean

true(默认），是异步请求。false，是同步请求。异步请求就是说当ajax发送请求后，在等待server端返回的这个过程中，前台会继续执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程和ajax块后面的脚本（另一个线程).同步请求在请求在请求发送出去会锁住浏览器，用户其他操作必须等待请求完成才可以执行。异步中，在ajax块内部是同步的，例如success内的代码是顺序执行的。

注意：跨域请求和dataType:"jsonp"请求不支持同步操作。

 cacheBoolean

1.默认为true；指在第一次请求完成之后，如果地址和参数不变化，第二次去请求，会默认获取缓存中的数据，不去读取服务器端的最新数据。只对type为get的时候可能会使用。

2.设置为false；每次读取的是最新的数据，不从缓存理读取。

 type:"post",每次提交的内容都不一样，所以cache:false

 successFunction请求成功后的回调函数，这个函数传递数据，并根据dataType解析数据，解析出的数据包括请求返回的状态及数据。

success: function (data) {                 if (data.success&&data.list!=null&&data.list!="") {                         var studentHtml="";                         var temp=data.list;                         for (x in data.list) {                             //遍历JSON格式的数组取元素, x代表下标                             studentHtml+='<tr><td>'+temp[x].name+'</td>'+        '<td>'+temp[x].number+'</td>'+ '<td>'+temp[x].age+'</td>';                         }

                    $("#userQuery").html(studentHtml);                 } else {                     alert(data.msg);                 }             }

errorFunction失败的时候调用函数有3个参数，即XMLHttpRequest对象,错误信息和捕获错误的对象（可选）

error: function (XMLHttpRequest, textStatus, errorThrown) {                   alert("服务器忙，请稍后再试");             }