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定时自动消失提示框/弹出框。
热门推荐
10 对患者生日祝福语简短
11 结婚祝福语简短装备
12 周岁祝福语学生文案简短
13 订婚领证祝福语简短精辟
14 导师获奖祝福语大全简短
15 新婚购房祝福语简短精辟
16 牛年祝福语简短的爱人
17 送芒果的祝福语简短
18 送给学长毕业祝福语简短