本功能实现:
- 禁用
form
原本提交方式; - 自动获取
action
属性; - 自动
serialize
数据; - 提交状态显示到提示框,
1.2
秒提示框自动消失; - 提交失败或错误,页面不跳转;
- 提交成功,跳转到指定页面。
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定时自动消失提示框/弹出框。