知识点:
$("#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 }});