jQuery异步总结

                     jQuery异步总结

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Adobe Dreamweaver JavaScript

作者：黄富滔

撰写时间：2020年5月03日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1语法：

jQuery.ajax([setting])方法

setting代表的是可选的值，用于配置Ajax请求的键值对集合

1. Ajax的一些参数（键与值）

①type：代表提交的类型。在使用时通过什么方式提交可以通过type的属性值GET或POST提交，默认情况下为GET提交。  例如： type: \”get\”

②url：发送请求的地址。当数据请求完毕之后需要提交数据控制器，通过该属性可以设置提交的地址

例如：url: \”/jQueryAjax/getPersonInfor\”   【第一个为控制器名称，第二个为控制器中方法名称】

③async:是否设置为异步。默认值为true（异步），当使用异步的时候，此句代码可以省略不写。当使用同步的时候，便设置为false，同步必须要等到其它请求完成才可以执行操作。例如：async:true,

④  dataType:预期服务器返回的数据类型,如果不指定，jQuery将自动根据http包MIME信息来智能判断,

              一般我们采用json格式，可以设置为\”json\”    例如：dataType: \”json\”,

 ⑤ success:是一个方法，请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串

 ⑥ error:是一个方法，请求失败是调用此函数，传入XMLHttpRequest对象

   serialize() 通过该方法可以序列化表单内容为字符串

            serializeArray() 序列化表单元素 (类似 \’.serialize()\’ 方法) 返回 JSON 数据结构数据。

                注意：此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作

                返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数

2、表单中常用到的代码块

①自定义变量获取表单内容

 var name = $(\”#txtName\”).val();

            var sex = $(\”#cboSex\”).val();

            var address = $(\”#txtAddress\”).val();

②判断数据是否完整

 if (name == \”\” || sex == 0 || address == \”\”) {

                alert(\”请检查数据是否完成\”);

                return false;

            }

③拼接字符，并通过序列化方法序列化表单

    var frmdata = \”name=\” + name + \”&sex=\” + sex + \”&address=\” + address;

            var serData = $(\”#myform\”).serialize();

            var arrData = $(\”#myform\”).serializeArray();

④通过ajax方法从服务器上获取数据

 $.ajax({

                type: \”get\”,

                url: \”/jQueryAjax/getPersonInfor\”,

                async:true,

                dataType: \”json\”,

                success: function (data) {

                    console.log(data);

                    $(\”#txtName\”).val(data.name);

                    $(\”#cboSex\”).val(data.sex);

                    $(\”#txtAddress\”).val(data.address);

                }

            })

⑤通过Ajax方式把数据提交给控制器，并且返回提示

            $.ajax({

                type: \”post\”,

                url: \”/jQueryAjax/getDataByFormCollection\”,

                data: arrData,

                //dataType:\’json\’

                success: function (msg) {

                    alert(msg);

                },

                error: function (xmlhttp) {

                    console.log(xmlhttp);

                }

            })

        }