jQuery优雅Post提交
本功能实现：
- 禁用form原本提交方式；
- 自动获取action属性；
- 自动serialize数据；
- 提交状态显示到提示框，1.2秒提示框自动消失；
- 提交失败或错误，页面不跳转；
- 提交成功，跳转到指定页面。
HTML代码：
<formaction="submit.php"> <inputname="title"value=""/> <buttontype="submit">提交</button> </form>
JavaScript代码：
$('form').submit(function(e){
e.preventDefault();
varself=$(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);
returnfalse;
}
},
'json'
).complete(function(result){
varsqlError=result.responseText.indexOf('SQL');
if(result.status==200&&sqlError!=-1){
fail_prompt('SQL错误：'+result.responseText,3000);
returnfalse;
}
});
});
在PHP代码中，
- 如果数据库执行成功，返回JSON数据：["success"=>true,"msg"=>"保存成功"]，
- 如果数据库执行失败，返回JSON数组：["success"=>false,"msg"=>"保存失败"]，
- 如果数据库执行错误，用throw抛出异常，异常信息里面只要包含SQL字符串，jquery的complete方法就可以获取到错误信息，并提示。
其中，成功、失败提示框用到：JQuery定时自动消失提示框/弹出框。