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);

                }

            })

        }