jquery ajax $.ajax()用法解析

jquey ajax部分包含以下部分

1.load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。

2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求

3. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。

jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

项目中我们常常需要使用无刷新列表的请求后台，使用dwr等ajax框架，明显缺点就不介绍了，直接入正题，上代码：

[java]
//查取所有资讯列表
function querySiteMessageList(pageIndex, orderFiled){
 //封装传递参数
 var obj = new Object();
 obj.pageIndex = pageIndex;
 obj.orderFiled = orderFiled;
 obj.messageSignal = $("#tabSignal").val();
 $.ajax({
 type : "POST",
 url : "${ctx}/siteMessage/queryMessagelist",
 data : obj,
 dataType: "json",
 success : function(data) {
 var str = "";
 //循环输出资讯列表
 $.each(data.rows,function(index,elem){
 var createTime = new Date(elem.publishTime);//获取发布时间并转换为Date类型
 var availableDate = new Date(elem.availableDate);//获取创建时间并转换为Date类型

 //发布时间
 var createMonth = createTime.getMonth()+ 1;
 var createHour = createTime.getHours();
 var createMinute = createTime.getMinutes();
 var createSeconds = createTime.getSeconds();
 //生效时间
 var availableMonth = availableDate.getMonth()+ 1;
 var availableDay = availableDate.getDate();

 createMonth = createMonth <10 ? "0" + createMonth : createMonth;
 createHour = createHour <10 ? "0" + createHour : createHour;
 createMinute = createMinute <10 ? "0" + createMinute : createMinute;
 createSeconds = createSeconds <10 ? "0" + createSeconds : createSeconds;

 availableMonth = availableMonth <10 ? "0" + availableMonth : availableMonth;
 availableDay = availableDay <10 ? "0" + availableDay : availableDay;

 str += '<tr>';
 str += '<td><input type="checkbox" name="ckeckedMessageId" value='+ elem.messageId +'></td>';
 str += '<td>'+elem.messageId+''+elem.title+'</td>';
 str += '<td>'+elem.creator+'</td>';
 str += '<td>'+createTime.getFullYear()+ '-'+ createMonth + '-'+ createTime.getDate()+' ';
 str += createHour + ':'+ createMinute + ':'+ createSeconds +'</td>';
 str += '<td>'+availableDate.getFullYear()+ '-'+ availableMonth + '-'+ availableDay +'</td>';
 str += '<td><a href="#" onclick="updateMessage('+ elem.messageId +')">'
 str += '<img src="${ctx}/static/common/images/sales/operation_add.png" /></a> ';
 str += '<a href="#" onclick="deleteOneMessage('+ elem.messageId +')"><img src="${ctx}/static/common/images/sales/operation_delete.png" /></a></td>';
 str += '</tr>';
 });

 //根据当前状态判断输出资讯还是资讯列表
 if($("#tabSignal").val()==1){
 //输出资讯列表
 $("#newslistTr").html(str);
 //实现分页
 $("#page_message").setPager({ RecordCount: data.count, PageIndex: pageIndex, buttonClick: pageClick });
 }
 else{
 //输出资讯草稿列表
 $("#draftlistTr").html(str);
 //实现分页 www.zzzyk.com
 $("#page_draft").setPager({ RecordCount: data.count, PageIndex: pageIndex, buttonClick: pageClick });
 }

 }
 });
};

上例描述了一个简单的请求后台获取数据列表并展示的过程，大家重点在红色部分：

关键点有3个，GET方式提交的情况直接把参数加在url后面，url : "${ctx}/siteMessage/queryMessagelist？id="+id,

data参数既可以用于get也可以用于post方式。传递多参数可以封装成obj对象

succes函数可以获取返回值，返回值类型由dataType指定，具体参数请参阅官方文档。

一般在succes函数里面对返回的数据进行处理。这里我取得返回数据然后输出到指定的位置

总之，jqury ajax方法可以很好的实现无刷新请求补充：web前端 , JavaScript ,