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

Question

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

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

Answer 1

代码没看出什么问题。自动刷新目测是提交表单了，有下面的可能
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,
            },
        })
    });

Answer 2

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