调用jquery 中的ajax post 请求后页面会自动刷新
前端用live-server启动
同一个地方之前没做前后端分离时没有出现这种问题
如何在请求发送后阻止页面自动刷新
<div class="content" id="vp">
<video id="plvideo" controls="true"></video>
<div class="shooter">
<input type="text">
<button type="button" id="bltbtn">发射</button>
<button type="button" id="log">全屏</button>
</div>
</div>
$("#bltbtn").click(function(e) {
e.preventDefault();
e.stopPropagation();
$.ajax({
url: "http://127.0.0.1:8000/vb/bltmsg/",
type: "post",
dataType: "json",
async: false,
data: {
"videoname": sessionStorage.getItem("vpname"),
"spm": sessionStorage.getItem("vuname"),
"msg": msg,
"tvctime": tvctime,
},
})
});
代码没看出什么问题。自动刷新目测是提交表单了,有下面的可能
1)jquery没有正确导入导致事件没绑定上,比如路径错误
2)执行click事件绑定的代码放到dom前面了没绑定上事件,导致提交了表单。需要放到dom ready事件中绑定,就是$(function(){...............})中执行绑定。或者放到贴出来的html代码下
3)内容动态加载,导致执行绑定时没有获取到dom,可以用on代理来实现
$(document).on('click','#bltbtn',function (e) {
e.preventDefault();
e.stopPropagation();
$.ajax({
url: "http://127.0.0.1:8000/vb/bltmsg/",
type: "post",
dataType: "json",
async: false,
data: {
"videoname": sessionStorage.getItem("vpname"),
"spm": sessionStorage.getItem("vuname"),
"msg": msg,
"tvctime": tvctime,
},
})
});