首页 > Web开发 > 详细

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

时间:2015-12-20 13:12:47      阅读:176      评论:0      收藏:0      [点我收藏+]

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;width: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("请求出错") }
        });
    });
});

 

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

原文:http://www.cnblogs.com/genesis/p/5060542.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!