jQuery异步提交表单防刷新 - Alex的博客

Alex的博客

本博客的文章均为原创,是本人从事行业多年来所遇见一些小问题的解决心得,希望可以帮助到大家!



jQuery异步提交表单防刷新

<!--jquery需要引入的文件-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>

<!--ajax提交表单需要引入jquery.form.js-->
<script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>



<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<base href="<%=basePath%>">
<title>Title</title>
<!--jquery需要引入的文件-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>

<!--ajax提交表单需要引入jquery.form.js-->
<script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>

<script>
$(function () {
//给id为ajaxSubmit的按钮提交表单
$("#ajaxSubmit").on("click",function () {
//alert(1);
$("#ajaxForm").ajaxSubmit({
beforeSubmit:function () {
// alert("我在提交表单之前被调用!");
},
success:function (data) {
//alert("我在提交表单成功之后被调用");
if (typeof(data) == "string"){
data = eval( '('+data+')');
//alert(data); object
handle(data);
}else{
handle(data);
}

}
});
return false; // 阻止表单自动提交事件防止跳转页面
});
});
//处理返回数据
function handle(data){
if(data.status == 200){
alert(data.message);
//处理逻辑
}else{
alert(data.message);
//处理逻辑
}
}
</script>

</head>
<body>
<form method="post" action="testAjax" id="ajaxForm">
姓名:<input type="text" name="name"/><br>
年龄:<input type="text" name="age"><br>

性别:男 <input type="radio" value="man" name="sex" checked/> 女 <input type="radio" value="woman" name="sex"/><br/>

<br><br><br>
<input type="submit" value="同步提交"/> &nbsp;&nbsp;<input type="reset" value="重置" />
<br> <br> <br>
<input type="button" value="点我ajax提交表单" id="ajaxSubmit"/>&nbsp;&nbsp;
</form>

</body>
</html>
浏览19  评论0  Alex于 2018-8-6 8:58
发言