如何使用按钮刷新div

Question

所以我有一个来自数据库的帖子的“feed”，我想要一个只刷新包含帖子的div的按钮，而不是重新加载整个页面。

Answer 1

假设DIV是

<div id="myContent"></div> 

，并要刷新它在存储在变量ajaxCont一个新的HTML标记的内容。

如果你想将内容添加到当前内容改变#myContent DIV

document.getElementById("myContent").innerHtml(ajaxCont); 

的内容

document.getElementById("myContent").appendChild(ajaxCont); 

Answer 2

的Javascript自然修改内容在页面上让你不必须“刷新”页面以更新其内容。

如果您正在使用AJAX来的数据动态地从也许是一个XML或JSON源拉，你可以在我的例子来看看这里：http://penguin.uclan.ac.uk/~lnelson/TE2006/ex3.html

或者，只是谷歌AJAX和有丰富的资源在那里。

Answer 3

jQuery中

<button id="MyButton">Refresh</button> 

$(document).ready(function() { 
    $("#myButton").on("click", function() { 
     $("#div").load("index.php") 
    }); 
}); 

Answer 4

阿贾克斯（简称异步JavaScript和XML）是你在找什么。你可以添加一个按钮监听器来运行你的Ajax代码，这个代码又可以调用你的数据库查询。

你Ajax的功能将类似于此：

function loadData() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("yourDivId").innerHTML = xhttp.responseText; 
     } 
    }; 
    xhttp.open("GET", "databaseQuery.php", true); 
    xhttp.send(); 
} 

你的按键侦听器将调用Ajax的功能：

<button onclick="loadData()">Click me</button> 

如果你正在使用PHP来查询数据库，只需echo你来自databaseQuery.php。