ajax post请求后页面会自动刷新页面

问题遇到的现象和发生背景

调用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,
            },
        })
    });

img

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632