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框架，明显缺点就不介绍了，直接入正题，上代码：

//查取所有资讯列表
  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><span class="messageId" style="display:none">'+elem.messageId+'</span>'+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="#" οnclick="updateMessage('+ elem.messageId +')">'
         str += '<img src="${ctx}/static/common/images/sales/operation_add.png" /></a>   ';
         str += '<a href="#" οnclick="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);  
         //实现分页
         $("#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方法可以很好的实现无刷新请求