Javascript 在不刷新的情况下更新网页的某个部分

我正在使用Django实现一个网站。我在网上搜索了关于更新网页某一部分而不刷新整个页面的内容，但这些内容对我来说不起作用，可能是因为我要更新的部分（div）实际上是由javascript实现的（使用脚本将其包含在html中）。我唯一更新的是脚本中的一个变量，这个结果应该反映在网站上。这是我在main.html中的代码

# I first have a button that could be clicked
<div class="col-lg-4">
     <p><button class="btn btn-primary" type="button" name="display_list" id="display_list">Display List</button></p>
</div>
# here is the script I include to update the section without refreshing the whole page
<script>
        $(document).ready(function(){
          $("#display_list").click(function(){
            $.get("display_list/", function(ret){
                $('#result').html(ret);
             });
          });
        });
</script>

<div id="result"></div>

这是我的url文件中的代码：

url(r'^display_list/$', views.display_list, name='display_list'),

如果需要，我可以提供更多信息。但我不明白为什么每当我点击按钮时，图形会附加到原始网页上，而不是在同一位置更新它。如何修改以刷新该部分，而不是将其附加到原始页面

---

非常感谢

您需要从html

show\u result.html

中删除

id=“result”

，因为一旦您第一次加载它，您的html将是这样的

<div id="result">
  <div id="result">
     <script> javascript that draws a graph on html webpage. I pass the updated variable from the corresponding function in views.py to here by calling render(). </script>
  </div>
</div>

在html网页上绘制图形的javascript。我通过调用render（）将更新后的变量从views.py中的相应函数传递到此处。

---

如果有多个项目具有相同的

id

则html无效。您需要从html

show\u result.html

中删除

id=“result”

，因为一旦您第一次加载它，您的html就会像这样

<div id="result">
  <div id="result">
     <script> javascript that draws a graph on html webpage. I pass the updated variable from the corresponding function in views.py to here by calling render(). </script>
  </div>
</div>

在html网页上绘制图形的javascript。我通过调用render（）将更新后的变量从views.py中的相应函数传递到此处。

---

有多个具有相同id的项目是无效的html，我认为问题在于在main.html中没有id为“result”的div。 你需要把它放进去，因为下面的js会寻找它

$('#result').html(ret);

所以只要把它放在main.html中就行了

# I first have a button that could be clicked
<div class="col-lg-4">
     <p><button class="btn btn-primary" type="button" name="display_list" id="display_list">Display List</button></p>
</div>
# here is the script I include to update the section without refreshing the whole page
<script>
        $(document).ready(function(){
          $("#display_list").click(function(){
            $.get("display_list/", function(ret){
                $('#result').html(ret);
             });
          });
        });
</script>

<div id="result"></div>

对此

$('#display_list').html(ret);

---

我认为问题在于main.html中没有id=“result”的div。 你需要把它放进去，因为下面的js会寻找它

$('#result').html(ret);

所以只要把它放在main.html中就行了

# I first have a button that could be clicked
<div class="col-lg-4">
     <p><button class="btn btn-primary" type="button" name="display_list" id="display_list">Display List</button></p>
</div>
# here is the script I include to update the section without refreshing the whole page
<script>
        $(document).ready(function(){
          $("#display_list").click(function(){
            $.get("display_list/", function(ret){
                $('#result').html(ret);
             });
          });
        });
</script>

<div id="result"></div>

对此

$('#display_list').html(ret);

---

对不起，我不明白为什么有两个

？我只在html文件的开头定义了一次。如果我只是说

，main.html（

$（'#result'）.html（ret）；

）中的这行代码怎么能工作呢？我试过并做了

。但当我点击按钮时，图形的这一部分并没有自动刷新。只有在刷新整个页面时才会刷新。对不起，我不明白为什么有两个

？我只在html文件的开头定义了一次。如果我只是说

，main.html（

$（'#result'）.html（ret）；

）中的这行代码怎么能工作呢？我试过并做了

。但当我点击按钮时，图形的这一部分并没有自动刷新。只有当我刷新整个页面时，它才会被刷新。我尝试了这两种方法，但它们仍然附加到原始页面，而不是更新页面。我不明白他们为什么要追加而不是更新页面的那个部分。它只会更新result div，而不会更新整个页面。这就是ajax的用途。我尝试了这两种方法，但它们仍然附加到原始页面，而不是更新页面。我不明白他们为什么要追加而不是更新页面的那个部分。它只会更新result div，而不会更新整个页面。这就是ajax的用途。