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