Question

我正在尝试使用jquery将文件的内容加载到分区。加载内容后，页面会自动刷新。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn1").click(function(){
                    $("#div1").load("file.txt");
                });
            });
        </script>
    </head>
    <body>
        <form name='form1'>

            <input id="btn1" type="submit">
        </form>
        <div id="div1"></div>
    </body>
</html>

因此ID为div1的分部中的内容永远不会显示出来。我提出了断点来检查文件是否加载。它加载成功。由于页面自动刷新，内容永远不会显示。

帮我解决一下

Answer 1

阻止提交按钮的默认操作。

$("#btn1").click(function(e){
    e.preventDefault();
    $("#div1").load("file.txt");
});

Answer 2

这是因为你的表单中有一个按钮

添加e.preventDefault();，您应该没问题

$("#btn1").click(function(e){
      $("#div1").load("file.txt");
      e.preventDefault();
});

另一种方式是更改你的html并输入

type="button"代替type="submit"

按钮内的提交按钮会在点击时触发提交，这会导致您的网页重新加载

Answer 3

这是因为您已将按钮放在form内而没有action属性，然后该属性默认为页面本身。所以基本上发生的事情是它正在加载文件的内容，然后将表单发布到自身，这会导致刷新。

为什么你还需要表格？将按钮更改为<button id="btn1">Click here to load</button>并将其放在表单之外。或者将功能更改为：

$(document).ready(function(){
    $("#btn1").click(function(e){ // e is the event object
        e.preventDefault(); // this prevents the form from posting.
        $("#div1").load("file.txt");
    });
});

jquery自动刷新页面

3 个答案: