javascript 如何在不重新加载网页的情况下更改 div 的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5316482/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the content of a div without reloading the webpage?
提问by shady
I have a website, that uses PHP to select the content,
我有一个网站，它使用 PHP 来选择内容，
<div>
<? include ("navigation.php"); // navigation.php generates the menu ?>
</div>
<div>
<?
$type = $_GET["type"];
switch ($type) {
case "page" :
include "Text.php";
break;
case "news":
include "news_2.php";
break;
default :
include "main.php";
}
?>
</div>
The url is of the format domain.com/index.php?type.
I need to change the block #contentwithout reloading the whole page, how can I do this?
网址的格式为domain.com/index.php?type。我需要在#content不重新加载整个页面的情况下更改块，我该怎么做？
回答by Codecraft
As you've tagged the question with "jquery" I assume you know what that is, and that you're loading it into your page.
当您用“jquery”标记问题时，我假设您知道那是什么，并且您正在将其加载到您的页面中。
All you need to is give your div and ID... content here
您只需要在此处提供您的 div 和 ID... 内容
And then use a bit of jquery.. in its simplest form just to load your content from 'myurl.php' into 'mydiv' when the page has finished loading:
然后使用一些 jquery.. 以最简单的形式，在页面加载完成后将您的内容从“myurl.php”加载到“mydiv”中：
$(document).ready(function() {
$("#mydiv").load("myurl.php");
});
You'll no doubt want some logic to determine what loads, and under what circumstances. If you need to pass data back to the URL then you'll need to go for jquery ajax ($.ajax). Its all pretty easy, loads of examples on the web, and good docs on the JQuery website.
毫无疑问，您需要一些逻辑来确定什么负载，以及在什么情况下。如果您需要将数据传递回 URL，那么您需要使用 jquery ajax ($.ajax)。这一切都非常简单，网络上有大量示例，JQuery 网站上有很好的文档。
回答by Ryan Thompson
This would best be done with Ajax. I like using jQuery's ajax function. Something like this:
这最好用 Ajax 来完成。我喜欢使用 jQuery 的 ajax 函数。像这样的东西：
function load(page){
var datastring='ANY DATA YOU WANT TO SEND';
$.ajax({
type: "POST",
url: 'your/pagehtml/',
data: "bust="+Date()+datastring,
dataType: "html",
cache: false,
success: function(html){
$('#content').html(html)
}
});
return false;
}
You wouldn't need to send the page in the URL this way. Anytime you change the url, you must be loading a different page. Outside of .htaccess rewrite. Which isn't what you need.
您不需要以这种方式在 URL 中发送页面。无论何时更改 url，您都必须加载不同的页面。在 .htaccess 之外重写。这不是你需要的。
Fire this on click or whatever you want.
点击或任何你想要的方式触发它。
回答by Hyman Lawson
If you're using jQuery, it's pretty easy. You didn't post what is supposed to trigger the change, so I'll assume you have a list of links in another element with an id of nav.
如果您使用的是 jQuery，那很容易。您没有发布应该触发更改的内容，因此我假设您在另一个元素中拥有一个链接列表，其 ID 为 nav。
Read more about the jQuery Ajax request here: http://api.jquery.com/jQuery.ajax/
在此处阅读有关 jQuery Ajax 请求的更多信息：http: //api.jquery.com/jQuery.ajax/
//run on page load
$(function(){
//bind a click event to the nav links
$("#nav a").bind("click", function(e){
//keep the links from going to another page by preventing their default behavior
e.preventDefault();
//this = link; grab the url
var pageLocation = this.href;
//fire off an ajax request
$.ajax({
url: pageLocation,
//on success, set the html to the responsetext
success: function(data){
$("#content").html(data.responseText);
}
});
});
});
I'd also suggest doing some code cleanup like caching your $("#content") element on the load event (something like window.container = $("#container"), and using window.container later on), but I left it as-is so that everything remains clear.
我还建议做一些代码清理，比如在加载事件上缓存 $("#content") 元素（类似于 window.container = $("#container")，稍后使用 window.container），但我保持原样，以便一切都保持清晰。
