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

转载于:https://www.cnblogs.com/lucyliang/p/4800530.html

ajax提交表单序列化（serialize()）数据相关推荐

ajax提交表单序列化不进请求,表单序列化+ajax跨域提交
php后台代码: use cmf\controller\HomeBaseController; use think\Db; header('Access-Control-Allow-Origin:*' ...
VIEW层AJAX提交表单到Controller的实体(AJAX传递序列化的输入元素)
在MVC环境中,AJAX方式添加一个对象,这个对象在Models中是一个视图模型,在前台显示时是这样的代码: <%using (Html.BeginForm()) { %> ...
java jquery提交表单_Jquery ajax提交表单几种方法
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...
Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...
Validator验证Ajax提交表单的方法
当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form在同一个页面的情况,但是提交一个表单以后不想页面刷新或者跳转,那么我们考虑到的就是Ajax提交表单,那么如何让Jquery的validato ...
jq表单序列化 serialize() serializeArray()的使用
系列文章目录文章目录系列文章目录前言一.方法二.jq 涉及方法说明 1.serialize() 方法: 2.serializeArray() 方法: 前言问题 :如何快速获取form表单内 ...
表单序列化serialize()和serializeArray()的区别以及后台接收
表单序列化serialize()和serializeArray()的区别以及后台接收 function add() {var data = $("#systemForm").ser ...
html ajax提交表单实例,Ajax提交表单并接收json实例代码
需求: 实现点击按钮后,数据以表单形式提交至服务器,并接收来自服务器的返回数据.过程中页面不刷新. html代码 xingming: nianling: ajax提交 js代码 function my ...
AJAX 提交表单以及文件上传
本文转自:https://www.cnblogs.com/zhuxiaojie/p/4783939.html#autoid-0-0-0 作者:朱小杰前言使用ajax请求数据,很多人都会,比如说: ...

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

ajax提交表单序列化（serialize()）数据相关推荐

最新文章

热门文章