JQuery异步Ajax

1、JQuery中的ajax方法：
$.Ajax:
(1) type:发出数据类型，POST或Get，默认值为Get
(2) url：发送请求的地址
(3) async：（默认：true）默认情况请求均为异步请求，设置false为同步请求
(4) data：是一个对象，连同请求发送到服务器的数据（请求的数据）
(5) dateType：预期服务器返回的数据类型，如果不指定，JQ将自动判读
（一般我们采用json格式）
（6）success：请求成功后的回调函数
（传入返回后的数据，以及包含成功代码的字符串）
（7）error：请求失败调用此函数
（传入XMLHttpRequest对象）

 get与post区别:
       与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
        然而，在以下情况中，请使用 POST 请求：
            1.无法使用缓存文件（更新服务器上的文件或数据库）
            2.向服务器发送大量数据（POST 没有数据量限制）
            3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
        get/post区别：
            1.GET方法是用来向服务器上获取数据，而PSOT是用来向服务器上传递修改数据。
            2.GET将表单里的数据添加到action所指向的URL后面，并且两者之间使用”?”连接，而各个变量之间使用"&"连接
              PSOT是将表单中的数据放在form的数据体(FormData)中，
              按照键值对的方式，传递到所指向的action
            3.GET是不安全的，因为在传输过程中，数据被放在请求的url中这样用户可以直接在浏览器上看到提交的数据，
              POST的所有操作对用户来说都是不可见的,数据都在数据体(FormData)中
            4.GET方法向URL添加数据,URL的长度是受限制的(URL的最大长度是2048个字符),

POST提交无限制
5.GET为form表单的默认提交方式
6.GET方式获取数据后，刷新不会有负面的影响，因为它只是获取数据，
POST数据会被重新提交可能会产生不良的后果(浏览器应该告知用户数据会被重新提交)
7.数据类型的限制：GET只允许ASCII字符,POST则无限制
(如果提交二进制数据(例如:图片)，需要使用POST方法)
1、使用Formdata传递数据

//提交修改数据,进行更改数据库
            $("#btn").click(function () {
                var userID = $("#userID").val();//用户id
                var userName = $("#userName").val(); //姓名
                var jobNumber = $("#jobNumber").val();//工号
                var userEmail = $("#userEmail").val();//邮箱
                var userTypeID = $("#userTypeID").val();//角色
                var userPassword = $("#Userpassword").val();//密码
                var userPassword2 = $("#Userpassword2").val();//确认密码
                var isEnable = $("#isEnable").val();//是否启用
                var userGroupID = $("#userGroupID").val();//用户组号ID
                var amount = $("#accountBalance").val();//余额
                var file2 = $("#fil").get(0).files[0]; //获取文件

                //进行验证
                if (userName == "" || userName == null || userName == undefined) {
                    layer.alert("姓名不能为空");
                    $("#userName").css("borderColor", "red");
                    return;
                }
                if (jobNumber == "" || jobNumber == null || jobNumber == undefined || /^[0-9A-z]{3,10}$/.test(jobNumber) == false) {
                    layer.alert("工号由3到10位字母或数字组成,请检查");
                    $("#jobNumber").css("borderColor", "red");
                    return;
                }
                if (userEmail == "" || userEmail == null || userEmail == undefined || /^([a-zA-Z]|[0-9])(\w|\-)+@@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(userEmail) == false) {
                    layer.alert("邮箱输入错误");
                    $("#userEmail").css("borderColor", "red");
                    return;
                }
                if (userTypeID == 0) {
                    layer.alert("请选择角色");
                    $("#userTypeID").css("borderColor", "red");
                    return;
                }
                if (userPassword2 != "" && userPassword2 != userPassword) {
                    layer.alert("密码输入不对应");
                    $("#Userpassword2").css("borderColor", "red");
                    return;
                }

                var fromdata = new FormData();
                fromdata.append("userName", userName);
                fromdata.append("jobNumber", jobNumber);
                fromdata.append("userEmail", userEmail);
                fromdata.append("userTypeID", userTypeID);
                fromdata.append("userPassword", userPassword);
                //fromdata.append("userPassword2", userPassword2);
                fromdata.append("userID", userID);
                fromdata.append("isEnable", isEnable);
                fromdata.append("userGroupID", userGroupID);
                fromdata.append("amount", amount);

                fromdata.append("userPicture", file2);

                //开启加载层
                var load = layer.load();
                //验证完成后,进行传递数据更改
                $.ajax({
                    method: "post",  //请求的方式不能为get因为get上传的文件大小有限
                    url: "@Url.Content("~/Other/UserDataMaintain/UpdateUser")",  //请求路径
                    data: fromdata, //封装数据Formdata
                    processData: false, //告诉jQuery不要去处理发送的数据 (主要)
                    contentType: false, //告诉jQuery不要去设置Content-Type请求头(主要)
                    success: function (msg) {
                        layer.close(load);
                        if (msg.State) {
                            layer.alert(msg.Text, { icon: 1 });
                            //$("#btn2").click();//调用重置按钮
                            $("#modal").css("display", "none");
                            layuitable.reload({
                                page: {
                                    curr:1
                                }
                            })
                        } else {
                            layer.alert(msg.Text, { icon: 2 });
                        }
                    }
                });
            });

2、使用表单序列化传递数据
（1）serialize() 序列表单内容为字符串，用于 Ajax 请求
（2）serializeArray() 序列化表单元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。

//保存
            $("#btn").click(function () {
                var form = $("#form").serializeArray();
                $.ajax({
                    method: "post",
                    url: "@Url.Content("~/info/Five/AddStudent")",
                    data: form,
                    success: function (msg) {
                        if (msg.State) {
                            layer.alert(msg.Text);
                            $("#modal").modal("hide");
                            laytable.reload();
                        } else {
                            layer.alert(msg.Text);
                        }
                    }
                })
            }

以下是form表单序列化出来的值：

这是控制器接收的值：

 public ActionResult AddStudent(int academeID,int classID,int specialtyID,string studentSex,string studentIDNum, string studentName,string studentNumber)

因此在使用表单序列时，form表单上的元素标签上的name属性值是与控制器接收的命名值对应的
在JQuery中还有三个请求的方法
1、JQuery中$.post():语法：$.post(url, [data], [callback], [type])
参数说明：
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

2、JQuery中$.get():语法：$.get(url, [data], [callback], [type])
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

3、JQuery中$.getJSON():语法：$.getJSON(url, [data], [callback])
描述：通过 HTTP GET 请求载入JSON数据
参数说明：
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
($.getJSON()方法只能接受返回值为json的数据)

在使用post请求或getJson时表单序列化需要转换为对象

//保存
            $("#btn").click(function () {
                var form = $("#form").serializeArray();
                var formdata = {};
                //转换为对象
                for (var key in form) {
                    formdata[form[key].name] = form[key].value;
                }
                $.post("@Url.Content("~/info/Five/AddStudent")",formdata,
                    function (msg) {
                        if (msg.State) {
                            layer.alert(msg.Text);
                            $("#modal").modal("hide");
                            laytable.reload();
                        } else {
                            layer.alert(msg.Text);
                        }
                })

            });

正常传值：

 var student = $("#studentid").val();
                    //路径
            $.post("@Url.Content("~/info/Five/AddStudent")",
                { cs: student }, //传参数  cs为自定义，与控制器接收的命名值对应
               function (msg) {  //回调函数
                   if (msg.State) {
                       layer.alert(msg.Text);
                       $("#modal").modal("hide");
                       laytable.reload();
                   } else {
                       layer.alert(msg.Text);
                   }
             })