Question

现在这个小部件的项目应该由php文件提供。

例如，javascript应该在这个div中写一个表。

<div id="widget"></>

它应该使用通过ajax提供的html动态替换内容。有谁知道怎么做。

此外，是否可以创建锚点，例如<a href="onclick:reload();"></a>来重新加载文章而不加载整个页面。感谢。

我想学习ajax，但是现在这是一回事，我不想学习整个ajax来创建这个小部件，虽然我想学习它。所以请通过代码向我提供有关此教程的网站，或者我可以帮助我一些代码（这将非常有用：D）

Answer 1

以下是类似这样的标准ajax模板。您可以按照问题中的说明将函数锚定到链接，我将函数重命名为easy。现在，您必须有一个后端脚本来获取请求并处理它并进行响应。我通常有一个programname_process.php脚本，我根据它想要做的事情发送变量动作。例如，要重新加载某个部分，请将post变量设置为“action = reload＆amp; extent = minimum”或者您可能需要的任何内容。然后检查流程类构造中的action变量，根据值，将其发送到要处理的函数，然后当你在一个应该替换div内容的大字符串中获取HTML时，只需回显它就会结束在responseText变量和poof中，然后出现在你的div中。

我在您需要编辑的地方全部上限以供使用：

<script type="text/javascript">
var xmlhttp;
function reload() {
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
        }
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.open("POST","YOUR PROCESSING SCRIPT",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("POST VARIABLES");
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById('widget').innerHTML=xmlhttp.responseText;
            }
        }
    };
</script>

Answer 2

创建ajax调用并使用onreadystatechange回调来使用响应：

<script type="text/javascript>
xhr = new XMLHttpRequest();
xhr.open("GET", "/yourpage.php?get=widget", true);
xhr.send(null);
xhr.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status==200) {
        var widget = document.getElementById ("widget");
                widget.innerHTML = response.xhr.responseText;
    }
};
</script>

Answer 3

你可以做这样的事情（使用jQuery）：

function callWidget(){
  $.ajax({
    url: "script.php",
    success: function(data){
      $("#widget").html(data);
    }
  });
}

在您的锚中，您可以使用：

<a href="#" onClick="callWidget();">Reload</a>

我如何创建一个使用ajax，js和php异步加载的小部件

3 个答案: