如何在不重新加载页面的情况下更改内容？ [复制]

Posted 2023-03-27

【中文标题】如何在不重新加载页面的情况下更改内容？ [复制]

【英文标题】：how to change content without reloading the page? [duplicate]

【发布时间】：2014-03-09 00:55:49

【问题描述】：

好的，可以说我有导航栏，例如。

<ul> <li class="selected">home</li> <li>about me</li> <li>contact</li> <ul>

我在页面上有一个内容，我想根据选择的<li> 进行更改，而无需重新加载整个页面。仅仅为了更新 2 个 div 而重新加载整个页面似乎有点毫无意义。

例如。 when home is selected I want to load home.php included in <div class='content'> + change class of <li> home</li> to selected etc.

我应该为此使用 AJAX 吗？还是我应该使用 $_GET -> 更改 URL？

我是初学者 -> 很抱歉有一些基本问题。

感谢任何帮助！

【问题讨论】：

Ajax(Asynchronous javascript and XML) 是关键！！！

@satishsharma 你在哪里看到重复的？问题是 AJAX 或 $_GET 而不是示例

【参考方案1】：

您可以使用 Ajax。

但如果您是初学者，另一种没有 Ajax 的解决方案：

• 将所有内容放在一个文件中

• 在您的 div 上放置与内容相关的 ID（包含“about”内容的 div = div#about）

• 只需在点击时切换 div，与内容相关

像这样（带有 jQ​​uery 的 JS）：

$(document).ready(function()
  $('nav a').click(function()
    var dest = $(this).attr('href');
    $('div.content').fadeOut(); // Hide all content divs
    $(dest).fadeIn(); // Show the requested part
    // You can do all of this using addClass / removeClass and use CSS transition (smoother, cleaner);
  return false;  
);
);

html 更新：

<ul> <li class="selected"><a href="#home">home</a></li> <li><a href="#about">about me</a></li> <li><a href="#contact">contact</a></li> <ul>

如果您不知道什么是 Ajax，我想这个解决方案更适合您。

【参考方案2】：

要根据新请求更改页面的一部分，请使用 Ajax。你可以在网上找到很多关于它的信息。

也就是说，使用 ajax 进行简单网站的基本导航是很糟糕的。只需进行正常导航即可。