Jquery表单序列化和AJAX全局事件

Jquery表单序列化

1.必须放在form标签内；

2.控件必须有name属性；

3.控件的value值会提交到服务器；

如：

<form id="form1">
    <input type="text" name="t1" />
    <input type="text" name="w2" />
    <input type="text" name="c3" />
    <input type="text" name="aaa" />
    <input type="radio" name="gender" value="male" />
    <input type="radio" name="gender" value="fmale" />
    <input type="button" id="btnOK" value="确定" />
</form>

$(function () {
    $("#btnOK").click(function () {
        var str = $("#form1").serializeArray();
        $.ajax({
            url: '/Home/Index',
            type: 'post',
            data: str,
            success: function () {

            },
            error: function () { alert("请求出错")}
        });
    });
});

提交结果：

AJAX全局事件

ajax请求前和处理后处理的事件：

ajaxSend ：ajax发出请求

ajaxComplete：ajax处理完成

如下例子，发出请求未响应的时候在网页上显示一张加载图片：

<input type="text" id="i1" />
<input type="text" id="i2" />
<input type="button" id="btnOK" value="确定" />
<span id="sp1"></span>
<br/>
<img id="imgLoading" style="display:none;100px;height:20px;" src="loading.gif" />

$(function () {
    $("#btnOK").click(function () {
        $("#sp1").text("");
        $("body").bind("ajaxSend", function () { //ajaxSend  ajax发出请求
            $("#imgLoading").show();//显示加载图片
        }).bind("ajaxComplete", function () {  //ajaxComplete ajax处理完成
            $("#imgLoading").hide();//隐藏加载图片
        });
        //var str = $("#form1").serializeArray();
        var i1 = $("#i1").val();
        var i2 = $("#i2").val();
        $.ajax({
            url: 'Handler1.ashx',
            type: 'post',
            data: { i1: i1, i2: i2 },
            success: function (data) {
                $("#sp1").text(data);
            },
            error: function () { alert("请求出错") }
        });
    });
});