Javascript 如何使用jQuery自动重新加载页面的一部分，而不刷新整个页面？

所以我有几件事想做。我有一段HTML，我希望在默认情况下（即第一次加载时）显示在页面上

所以它应该只在页面上重新加载“viewport”div…而不是整个页面

想法

    $(function () {

        var num_of_images = 2,
            showAndHide;

        $("img[id^=icon]").bind("click", function () {
            num_of_images = parseInt(this.id.replace("icon#", ''), 10);
            showAndHide(num_of_images);
        });

        (showAndHide = function (n) {
            $("ul.overview").hide() // hide this while we "do work"
               .children() // get children
                  .show() // show all children
                  .filter(":nth-child(" + n + ") ~ li") // get the next siblings of the nth child
                     .hide() // hide them
                  .end()
               .end()
            .show(); // show the parent list
        })(num_of_images)

    });

这是一个“待定”解决方案。我还没有测试过这个，如果它能工作，我会感到惊讶

编辑：好的，我测试并修复了一些东西，这似乎有效

---

注意，我在那些

img

元素上附加了一个click处理程序。因此，如果您不需要这些锚定标记，就不需要它们。

如果您希望只重新加载页面的一部分HTML内容（无需添加JavaScript），则可以使用

---

您需要

$（'.viewport'）.load（'/url'）

将视口的内容替换为从/url从服务器返回的新HTML块。当页面加载时，您可以调用该加载函数一次，当您希望替换视口的内容时，可以再次调用该加载函数。您可能希望在使用的任何模板语言中使用include-type-magic，这样您就可以跳过初始加载并在一个请求（而不是两个）中呈现初始页面。您可以在页面上的更改事件或其他类型的事件中触发加载函数。

重新加载的是什么？它是从其他地方获取新内容还是隐藏某些内容？如果jquery变量'num_of_images'设置为2，则第一组HTML仅显示其中的2个图像。我想发生的是，当你点击3，你会看到其中的3个图像，而不是2个。4也应该如此。我用一个解决方案更新了我的答案。当你可以的时候去看看吧！假设我想在jquery函数中硬编码HTML？第一个问题是，如果我这样做而不是加载一个单独的文件，是否会导致加载命中？第二个问题是，我该怎么做？只需将.html（）函数链接到该行即可？如果要硬编码html，可以使用.html（）函数。不需要html函数，加载函数将为您替换该html块。联机检查load（）的示例，或者自己尝试。在您的一个页面上使用google chrome的JavaScript控制台是一种很好的方法，可以试验jquery并找出在您的情况下可以使用的方法，您只需键入jquery命令并以交互方式查看结果。加载单独的文件会向服务器提交一个新请求（使用.load（））。如果您硬编码了内容，则不会向服务器发送请求。如果你正在添加大量HTML，我不会将其硬编码到JavaScript中。。。另一种方法是使用模板系统将HTML结构添加到页面中（请参阅），我现在不使用模板语言。只是简单的html、css和jquery。那么，我是否必须创建一个独立的html文件，其中只包含该内容，然后像那样加载它？另外，仅用于加载目的的html文件是否具有常规标记？

<a href="#"><img src="images/2.png" id="icon#2"></a> | 
<a href="#"><img src="images/3.png" id="icon#3"></a> | 
<a href="#"><img src="images/4.png" id="icon#4"></a> | 

var win_width = $(window).width();
var num_of_images = 2; // This should be changed to 3, when 3 is clicked, and 4 when 4 is clicked, etc.

    $(function () {

        var num_of_images = 2,
            showAndHide;

        $("img[id^=icon]").bind("click", function () {
            num_of_images = parseInt(this.id.replace("icon#", ''), 10);
            showAndHide(num_of_images);
        });

        (showAndHide = function (n) {
            $("ul.overview").hide() // hide this while we "do work"
               .children() // get children
                  .show() // show all children
                  .filter(":nth-child(" + n + ") ~ li") // get the next siblings of the nth child
                     .hide() // hide them
                  .end()
               .end()
            .show(); // show the parent list
        })(num_of_images)

    });

$('div#content').load('morecontent.php');