前端的坑-提交表单页面自动刷新

前端知识 专栏收录该内容
7 篇文章 0 订阅

遇到的问题

        最近一段时间需要用到jsp加上ajax局部的刷新页面,本来并不是一个比较复杂的功能,但是却遇到了比较大的问题,问题的具体情况是每当局部刷新之后页面就会自动刷新,然后就又回到了没有刷新前的状态,这让人感觉很坑爹啊!

排查问题

        有问题了,当然是要首先排查代码了,看了无数次的代码,都没发现会导致页面自动刷新的情况,让人十分苦恼。
        然后的话,就想着难道是jquery的html()方法刷新页面,后来查了很久,也没有能够找出来。
        无奈之下,回去看页面,发现了一个细节,原来这个地方的搜索按钮在一个表单之中,偶,万事大吉,终于找到了。原来是所使用的bootstrap的导航栏使用了表单。

<script language="javascript" type="text/javascript">
    $("#search").click(function() {
        $.ajax({
            type : "POST",
            url : "/ajaxsearch/零食",
            async : false,
            data : {},
            dataType : "html",
            timeout : 1000,
            success : function(dates) {
                $("#mainContent").html(dates);
                window.event.returnValue = false;
            },
            error : function() {
                console.log("请求失败,请重试!");
            }
        });
    });
</script>

收获

        这次的收获就是当你所做的东西依赖第三方的时候,一定要小心一些小的细节,小心被坑到,有时候被坑到还浑然不自知,真的是相当的伤心啊!
        然后,还有就是当表单提交的时候会刷新当前的页面,那么,如何阻止?只需要加上window.event.returnValue = false;这样的一句代码就可以万事大吉了。踩到坑真的可以让人成长的。

  • 7
    点赞
  • 0
    评论
  • 3
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

henry-hacker

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值