//前端小白,登录页做前后端交互时,ajax交互提示成功之后,页面不跳转到制定的页面,表单自动刷新了?(黑人脸……)
不说了,代码供上……
<form>
<section>
<label><i class="layui-icon layui-icon-username"></i></label>
<input type="text" id="login_user_name" placeholder="用户名"/>
</section>
<section>
<label><i class="layui-icon layui-icon-password"></i></label>
<input type="password" id="login_password" placeholder="密码"/>
</section>
~~<input type="sumbit" id="dlButton" class="btn_login" value="登录"/>~~ <!---坑-->
<input type="text" id="dlButton" class="btn_login" value="登录"/>
</form>
<script>
//aiax请求数据
function ajax_get(){
$("#dlButton").click(function (){
var tnumber=$("#login_user_name").val();
var passWord=$("#login_password").val();
var all = {'tnumber':tnumber,'password':passWord};
$.ajax({
url:"http://192.168.0.146:8088/index/login",
type:'POST',
dataType:'json',
async:false,
data:{
'tnumber':tnumber,
'password':passWord
},
success:function(data){
console.log('成功');
window.location.href="https://www.baidu.com/";
},
error:function(){
console.log('错误');
}
})
})
};
ajax_get();
</script>
问题:当form中存在button标签时或者是button类型的input标签, 用ajax异步提交表单后,也面会被刷新。
原因:input类型为submit时,表单有提交的功能,此时再次提交一下表单,页面被刷新了;(若此时只写一个button,不写 button type=‘submit’ 时 ,也会有提交的功能,提交一下表单,页面还是被刷新)
解决:把button类型改成其他类型即可,或写成a标签形式~