thinkphp-ajax异步验证之ajaxReturn的使用

jquery序列化form表单

在开发中有时需要在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

使用submit，进行ajax数据提交

$("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; });