炫意html5
最早CSS3和HTML5移动技术网站之一

jQuery优雅Post提交

本功能实现:

  1. 禁用form原本提交方式;
  2. 自动获取action属性;
  3. 自动serialize数据;
  4. 提交状态显示到提示框,1.2秒提示框自动消失;
  5. 提交失败或错误,页面不跳转;
  6. 提交成功,跳转到指定页面。

HTML代码:

<form action="submit.php">
<input name="title" value="" />
<button type="submit">提交</button>
</form>

JavaScript代码:

$('form').submit(function(e) {
e.preventDefault();
var self = $(this);
$.post(
self.attr("action"),
self.serialize(),
function (result) {
if (result.success) {
sucess_prompt(result.msg);
setTimeout(function () {
window.location.href = index.php;
}, 1000);
} else {
fail_prompt(result.msg);
return false;
}
},
'json'
).complete(function(result) {
var sqlError = result.responseText.indexOf('SQL');
if (result.status == 200 && sqlError != -1) {
fail_prompt('SQL错误:' + result.responseText, 3000);
return false;
}
});
});

在PHP代码中,

  • 如果数据库执行成功,返回JSON数据:["success" => true, "msg" => "保存成功"]
  • 如果数据库执行失败,返回JSON数组:["success" => false, "msg" => "保存失败"]
  • 如果数据库执行错误,用throw抛出异常,异常信息里面只要包含SQL字符串,jquery的complete方法就可以获取到错误信息,并提示。

其中,成功、失败提示框用到:JQuery定时自动消失提示框/弹出框。

炫意HTML5 » jQuery优雅Post提交

Java基础教程Android基础教程