单击时仅刷新 div答案

【问题标题】：Refresh only a div on click单击时仅刷新 div
【发布时间】：2014-05-03 12:53:46
【问题描述】：

点击按钮后我只想刷新<div class="wrap"> ... </div> 有了这个window.location.reload()，但我刷新了整个页面，所以我需要一个只刷新那个div的ajax脚本。

<div class="wrap">

    // Content

    <div class="random_dil">
    <a class="button" onclick="window.location.reload()" href="#">Sljedeće pitanje</a>
    </div>

我试过了

<div id="mydiv"></div>
<a id="refresh">click</a>

<script>
$(function() {
  $("#refresh").click(function() {
     $("#mydiv").load("http://blah.com/page.php")
  })
})
</script>

但这又刷新了整个网站。

【问题讨论】：

$("#mydiv").load("http://blah.com/page.php") 应该将内容放入 DIV，而不是重新加载所有站点
这能回答你的问题吗？ Onclick reload the div only

标签： jquery html ajax

【解决方案1】：

$.ajax({
    url: "http://blah.com/page.php",
    async: true
}).done(function(result) {
    $("#mydiv").html(result);
});

【讨论】：

为什么在 $("#mydiv").load("http://blah.com/page.php") 不工作时这会工作？
@A. Wolff 如果您使用 iframe 而不是 div，我认为 load("url") 无需重新加载整个页面即可正常工作。
load() ajax 方法适用于接受任何内容的任何类型的元素，如 DIV api.jquery.com/load
@A. Wolff：我对 load() 没有清晰的概念，所以我总是这样 $(id).html(content);

【解决方案2】：

<script type="text/javascript">
function GetXmlHttpObject()
{
  if (window.XMLHttpRequest)
  {
    return new XMLHttpRequest();
  }
  if (window.ActiveXObject)
  {
    return new ActiveXObject("Microsoft.XMLHTTP");
  } 
  return null;
}

function ajax_function(url, postData, id)
{
xmlhttp=GetXmlHttpObject();
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", postData.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.onreadystatechange=function()
{
    if(xmlhttp.readyState==4)
    {
          document.getElementById(id).innerHTML=xmlhttp.responseText;                            
    }       
}                
    xmlhttp.send(postData);
 }

 function refreshDiv()
 {
var params = '';
var DivId  = 'wrap';
    var url    = 'http://blah.com/page.php';

ajax_function(url, params, DivId);
 }
 </script>

HTML

<div class="wrap">

// Content

<div class="random_dil">
<a class="button" onclick="refreshDiv()" href="#">Sljedeće pitanje</a>
</div>

【讨论】：

【解决方案3】：

如果你说整个页面是在mydiv区域内重新创建的，当你点击它时，IE点击会被添加到我的div中。这是因为这是 page.php 提供的内容，jquery 只能选择页面的一部分来将脚本的第三行更改为。

$("#mydiv").load("http://blah.com/page.php #mydiv" );

在您的第二个“也尝试过”示例中。

【讨论】：