Question

拜托，帮助我！

您能解释一下如何使用更改网址重新加载页面的部分，但必须不包含哈希标记。

一些代码：
网址：mysite.com/first /

<html>
 <body>
  <h1>RELOAD!</h1>
  <div>few words...</div>
  <input type="button">
 <body>
</html>

想要改变：
网址：mysite.com/second /

<html>
 <body>
  <h1>RELOAD!</h1>
  <div>other few words...</div>
  <input type="button">
 <body>
</html>

如何才能在DIV中重新加载另一个内容？

我看到了另外一个例子，如下：

if (location.href.indexOf("#") > -1)
    location.assign(location.href.replace('#', "/"));

但是 - 它会重新加载所有页面！

.htaccess - 我无法使用'导致字符“＃”而下一个文字不会发送到服务器。

我也见过代码：

history.pushState(null, null, '#myhash');
if(history.pushState) {
    history.pushState(null, null, '#myhash');
}
else {
    location.hash = '#myhash';
}

但无法理解。

也许还有其他正确的方法可以做到。

Answer 1

这里实际上有两个不同的问题：

如何从服务器加载内容并将其显示在现有页面中，而无需重新加载整个页面
如何让它看起来像是在新网址上，而无需重新加载页面

这些都与.htaccess（通常是指Apache的mod_rewrite模块）有关，因为它们都是关于客户端的行为方式，而不是服务器

第一部分通常被称为“AJAX”，您可以在线找到大量信息。 “X”最初代表“XML”，但实际上你可以获取你想要的任何类型的数据，例如纯文本或一段现成的HTML，并使用JavaScript将它放在你的页面上。流行的jQuery库有a method called .load()，它向服务器发出请求，并使用响应替换页面的特定部分。

第二部分有点棘手 - 因为页面实际上没有重新加载，所以你基本上希望浏览器对当前的URL撒谎。您会看到很多示例仅在#之后更改URL的部分内容的原因正是因为它们未发送到服务器;传统上，它们习惯于将当前页面滚动到特定的“锚点”。因此，您可以根据需要随时更改它们，如果用户书签或共享您的页面，您可以查看#之后的部分并重新加载他们加入书签/共享的状态。

但是，作为“HTML5”技术组的一部分，添加了一项功能，通过“将状态”推送到history对象来更改浏览器的实际URL栏。换句话说，在浏览器的后退/前进菜单中添加条目，而不实际加载新页面。存在明显的安全限制（您不能假装用户导航到完全不同的域），但API本身非常简单。 Here is the MDN documentation explaining it.

对于您的简单示例，假设已包含jQuery，您可能会执行以下操作：

// Find the div with a jQuery selector; this would be more specific in reality
jQuery('div')
    // Request some text from the server to replace the div
    .load(
        // This URL can be anything that generates the appropriate HTML
        '/ajax.php?mode=div-content&stage=second',

        // Add a callback function for when the AJAX call has finished
        function(responseText, textStatus, XMLHttpRequest) {
            // Inside the callback function, set the browser's URL bar
            // and history to pretend this is a new page
            history.pushState({}, '', '/second/');
    }
);

请注意，jQuery远不是这样做的唯一方法，它只是让示例变得简单，以便利用为我们完成大量工作的现有函数。

重新加载页面的一部分

1 个答案: