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>

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