JQuery---$.ajax()

ajax手册

一、$.ajax()提交

1.url：发送请求的地址，要求是String类型

2.type：请求方法(post或者get)，默认是get，要求是String类型

3.timeout：设置请求超时时间（毫秒），要求是number类型

4.async：默认true，所有请求是异步，要求是Bool类型的参数，如果需要发送同步请求，将此项设置为false。注意：同步时浏览器会被锁住

5.cache：默认为true(当datatype为script时，默认为false)从浏览器缓存中加载请求信息，要求是Bool类型

6.data：发送到服务器的数据，要求是Object或string类型。

7.dataType：预期服务器返回的数据类型，要求为String类型的参数。

8.beforeSend：发送请求前修改XMLHttpRequest对象的函数。要求为Function类型。

9.complete：请求完成后调用的回调函数（请求成功或失败时均调用）。要求为Function类型

10.success：请求成功后调用的回调函数,要求为Function类型

         (1)由服务器返回，并根据dataType参数进行处理后的数据。

         function(data, textStatus){

            //data可能是xmlDoc、jsonObj、html、text等等

            this;  //调用本次ajax请求时传递的options参数

         }

11.error:

说明：请求失败时被调用的函数。要求为Function类型的参数，该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

       function(XMLHttpRequest, textStatus, errorThrown){

          //通常情况下textStatus和errorThrown只有其中一个包含信息

          this;   //调用本次ajax请求时传递的options参数

       }

12.contentType：

说明：内容编码类型。要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13.dataFilter：给Ajax返回的原始数据进行预处理的函数。要求为Function类型

15.global：Boolean类型，默认为true。表示是否触发全局ajax事件。

16.ifModified：Boolean类型,默认为false。仅在服务器数据改变时获取新数据。

17.jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。

18.username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

19.password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。

20.processData：要求为Boolean类型的参数，默认为true。

21.scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"

22.$.each()函数:$.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容。

案例展示：

login.html代码：

//$表示juery对象
$.ajax({
                    async: false,
                    type: "post",  //数据提交方式（post/get）
                    url: "/editPassword",  //提交到的url
                    contentType : "application/x-www-form-urlencoded; charset=utf-8",
                    data: {"username": username, "oldPassword": oldPassword, "newPassword": newPassword},//提交的数据
                    dataType: "text",//返回的数据类型格式
                    success: function (msg) {     //msg 是controller中return返回的值
                        alert(msg.toString());

                        if (msg == "wang") {  //修改成功
                            //修改成功处理代码...
                            alert("修改成功")

                        } else {  //修改失败
                            //修改失败处理代码...
                            alert("修改失败")
                        }
                    }
                });
           

controller代码展示：

@RequestMapping("/editPassword")
    @ResponseBody
    public String editPassword(HttpServletRequest request) {
        String oldPassword = request.getParameter("oldPassword");
        System.out.println("...........editPass.oldPassword:....." + oldPassword);

        return "wang";
    }
           

二、$.getJSON()方法

jQuery中的$.getJSON( )方法函数主要用来从服务器加载json编码的数据，它使用的是GET HTTP请求

语法 ：jQuery.getJSON(url,data,success(data,status,xhr))
           

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)	可选。规定当请求成功时运行的函数。 额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象

案例：

html页面

<div class="category-wrap"></div>
           

js页面

$.getJSON(listUrl,function (data) {
            if (data.success){
                var datalist = data.data;
                $('.category-wrap').html('');
                var tempHtml='';
                datalist.map(function (item, index) {
                    tempHtml += ''
                        + '<div class="row row-product-category now">'
                        + '<div class="col-33 product-category-name">'
                        + item.productCategoryName
                        + '</div>'
                        + '<div class="col-33">'
                        + item.priority
                        + '</div>'
                        + '<div class="col-33"><a href="#" target="_blank" rel="external nofollow"  class="button delete" data-id="'
                        + item.productCategoryId
                        + '">删除</a></div>'
                        + '</div>';
                });
                $('.category-wrap').append(tempHtml);
            }