Question

我对ajax还是陌生的，真的很挣扎。我的最终目标是制作一个像nodebb这样的论坛软件。我已经建立了一个php论坛，但决定不使用它，因为它看起来像旧的，不像nodebb这样的快速论坛。我想了解的是如何制作多个标签，每个标签显示不同的信息，但标题保留相同的数据。我知道这可能是一件非常简单的事情，但是目前我无法完成。 https://dogecraft.net是我要完成的工作的一个很好的例子。

如果单击不同的选项卡，它将在每个选项卡中加载信息。我试过了，但是网址有问题。重新加载后，它只是加载了我的新文件，而这不是我想要的。

（是的，我正在使用本地jquery文件。不是jquery。）

我尝试过w3schools，但没有找到真正有用的信息

我还尝试了许多其他网站。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
  $( "#one" ).click(function(){
    $("#div1").load("/one/").hide().fadeIn();
    window.history.pushState("object or string", "Title", "/one/");
  });
});
$(document).ready(function(){
  $( "#two" ).click(function(){
    $("#div1").load("two.html").hide().fadeIn();

  });
});
</script>
</head>
<body>
<button id='one'>Page one</button> <button id='two'>Page two</button>
<h2>This text never changes :)</h2>
<div id="div1"></div>


</body>
</html>

我想要一个主页'index.html / php' 我需要一个按钮来加载一页内容（one.html / php），然后再另一个按钮来加载另一页内容（two.html / php）。

刷新后，我希望它保留与首页相同的内容，包括标题中的按钮。

Answer 1

您可以对html / php进行Ajax调用以检索html代码，然后将内容注入到div中。这是一个示例：

$(document).ready(function() {
    $("#one").click(function() {
        $.ajax({
            url : 'http://myserver.com/myhtmlpage.html',
            success : function(html) {
                $("#div1").html(html);
            }
        });
    });
    $("#two").click(function() {
        $.ajax({
            url : 'http://myserver.com/myphppage.php',
            success : function(html) {
                $("#div1").html(html);
            }
        });
    });
});

单击按钮时，将进行ajax调用，如果成功，将调用成功函数。第一个参数具有您请求的网页的html代码。然后，您可以使用jQuery的html函数，将其注入到div中。

一些提示：

您可能只想使用一个onready函数，而无需多次声明它
您可能会考虑返回带有数据的json对象，而不是返回php页面。如果以后考虑使用诸如Angular或Vue之类的框架，这将很有用。如果您可以在php上生成这样的JSON文件：

{ “名称”：“约翰” }

然后您可以执行以下操作：

    $("#two").click(function() {
        $.getJSON({
            url : 'http://http://myserver.com/myphppagethatservesjson.php',
            success : function(json) {
                $("#div1").html("<h1>My name is " + json.name + "</h1>");
            }
        });
    });

然后它将显示“我的名字叫约翰”。

这可以改善很多，但希望对您有所帮助。

如何制作类似于nodebb的AJAX应用程序？

1 个答案: