ajax提交表单序列化（serialize()）数据

知识点：

$("#form").serialize();将表单数据序列化为标准URL编码文本字符串（key1=value1&key2=value2…）。

以下用一个例子来演示ajax提交表单序列化数据。

表单内容：

<form id="f1">  
<label for="realname" >姓名:</label><input type="text" name="realname" id="realname" value="">
<label for="phoneNum">手机号:</label> <input type="text"  name="phoneNum"  id="phoneNum" value="">
<label for="Email" >邮箱:</label> <input type="text"  name="email" id="email" value="">
<inpt type="button" name="btnConfirm"  id="btnConfirm" value="确定" />
</form>

View Code

script代码：

  <script type="text/javascript">
    $(function () {
        $(\'#btnConfirm\').click(function () {
        
            $(this).attr(\'disabled\', \'disabled\').val(\'正在处理...\');//点击确定后按钮禁用
            var data = $(\'#f1\').serialize();//将表单数据表单序列化（key1=value1&key2=value2…）后提交
            $.post(\'/Users/SaveUserInfo\', data,
                function (obj) {
                    $(\'#btnConfirm\').attr(\'disabled\', false).val(\'确认\');//解除禁用
                    if (obj.Status == \'ok\') {
                        alert("修改成功");
                    } else {
                        alert(obj.msg);
                    }
                }, \'json\');//这里的json表示数据传输格式为json.
        })
    })
</script>

ajax传输数据的方式有如下几种写法(都以form表单序列化方式传输数据)：

$.ajax({
    type: \'post\',
    url: \'your url\',
    data: $("form").serialize(),
    success: function(data) {
        // your code
    }
});

$.post(\'your url\', $("form").serialize(), function(data) {
        // your code
    }
});

$.get(\'your url\', $("form").serialize(), function(data) {
        // your code
    }
});

$.getJSON(\'your url\', $("form").serialize(), function(data) {
        // your code
    }
});