jQuery异步提交表单防止页面刷新方法-博文家

alex 1725天前2018-09-19 09:28:16 | 抢沙发 2698

本文主要是解决在前端用jQuery进行表单提交的时候默认情况下前端页面是会被刷新的，但是通过本文的方法设置后可以实现前端页面无刷新无感知提交表单到后台。

jQuery

在这里我们需要用到jquery组件和jquery.form两个组件

第一步:引入两个组件

<!--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>

是不是很简单，赶快去试试吧。

除特别注明外，本站所有文章均为博文家原创，转载请注明出处来自https://www.32e.top/develop/js/article-14.html