如何从同一页面上的不同 html 页面加载其他内容？答案

【问题标题】：How can i load other content from a different html page on the same page?如何从同一页面上的不同 html 页面加载其他内容？
【发布时间】：2012-05-10 19:27:51
【问题描述】：

我有这个主页，上面有几个按钮。我想知道如何通过单击按钮将 DIV 的内容与不同 html 页面上的内容相匹配。任何提示都会很棒！

【问题讨论】：

标签： php jquery html ajax

【解决方案1】：

假设你有一个 div，你希望你的内容去到哪里。

<div id="result"></div>    
<a href="#" id="other">Click Here</a>

然后使用 jQuery ajax @987654321@ 函数可以获取另一个页面上的数据并将 html 发送到 div。

$(function() {    
   $("#other").click(function() {
       $('#result').load('ajax/test.html');
   });   
});

在这种情况下，当用户点击链接时，来自 'ajax/test.html' 的所有 html 将被发送到带有 id 结果的 div。

【讨论】：

很确定丹尼斯想要在另一个页面上的div 的内容。尽管他也可能想将其放入div。他还希望它响应按钮单击，而不是在页面加载时。
有没有办法将按钮与该功能链接？
这里是一些带有按钮的页面代码：
// 包含按钮的 div
内容需要来到这里
// 当您单击此按钮时，需要将不同 html 页面（名为 MessagePage.html）的内容加载到“内容”div 中。那么是否可以实现您为这个问题提供的代码？因为我似乎无法让它工作，或者我看到了一些小东西。

【解决方案2】：

欢迎来到堆栈溢出！如果您对常见问题解答不满意，人们可能会在这里有点苛刻。你会一直想要：

告诉我们您的尝试
向我们展示您的代码

如果你做这些事情，你会在这里找到一些惊人的帮助（尽管已经被否决了；）。

要回答您的问题，您需要监控导航元素的点击并在点击时加载页面。您还需要确保停止按钮的默认操作。所有这些都可以这样实现：

$(document).ready(function() {
  $("#target").click(function(e) {
    $('#result').load('file.html');
    e.preventDefault();
  });
});

#target 是您的特定按钮，#result 是您的 file.html 加载到的位置（在当前页面上），e.preventDefault() 阻止您的按钮执行其他操作（大多数人将此称为劫持）。

【讨论】：