在开发中有时需要在js中提交form表单数据,就需要将form表单进行序列化。
jquery提供的serialize方法能够实现。
$("#searchForm").serialize();
但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串。
例如以下代码:
<form id="searchForm"> <input name="id" value="123"/> <input name="cx" value="lklj"/> </form> <script type="text/javascript"> console.info($("#searchForm").serialize()); </script>
输出结果是:id=123&cx=lklj
$("form").submit(function(){ alert("Submitted"); });
当提交表单时,会发生 submit 事件。
该事件只适用于 <form> 元素。
submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。
在使用id时,注意加上 onsubmit="return false;" 防止重复提交。
<script type="text/javascript"> $(function() { $('#form1').submit(function() { //当提交表单时,会发生 submit 事件。 //此处可做表单验证 if ($("#username").val() == "") { alert("用户名不能为空"); return false; } var postData = $("#form1").serialize(); //序列化表单,后台可正常通过post方法获取数据 $.ajax({ type: "POST", url: "/member/member/post_member", data: postData, beforeSend: function() { $("#btn-submit").attr("disabled", true);//提交表单前的处理,防止用户多次点击【登陆】,重复提交表单 $("#btn-submit").val("正在登陆..."); }, success: function(msg) { if (msg == 0) { alert('操作成功'); window.location.href = '/member/member'; } else { $("#btn-submit").attr("disabled", false); $("#btn-submit").val("登陆"); alert("用户或密码错误!"); } } }); }); }); </script> <div> <form id="form1" onsubmit="return false;"> //注意:此处必须阻止表单提交 <!--表单内容部分--> <input type="reset" value="重置" /> <input type="submit" id="btn-submit" value="登陆" /> </form> </div>
用form标签提交
$("form").submit(function (e) {var btn = $("#btn_register").button('loading'); $.ajax({ url: "/Account/Register", type: "Post", data: $(this).serialize(), success: function (obj) { if (obj.code === 0) { swal({ title: "恭喜您,注册成功", text: "", type: "success", showCancelButton: false, confirmButtonColor: "#DD6B55", confirmButtonText: "好的", closeOnConfirm: false, closeOnCancel: false }, function (isConfirm) { if (isConfirm) { window.location.href = "./"; } }); return; } swal({ title: "悲剧了", text: obj.msg, type: "error" }); }, error: function (error) { swal({ title: "悲剧了", text: "服务器罢工了吧", type: "error" }); }, complete: function () { btn.button('reset'); } }) return false; });