javascript 如何使用 jquery 将 ajax 数据加载到 div 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25676851/
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 do I load the ajax data into a div with jquery?
提问by Codegenesis G
I'm trying to do is load an external html page then display the contents within a div when a button is clicked.
我试图做的是加载一个外部 html 页面，然后在单击按钮时显示 div 中的内容。
I get the alert message displaying the contents of the test.html, however when I try to display it within a div nothing happens.
我收到显示 test.html 内容的警报消息，但是当我尝试在 div 中显示它时，没有任何反应。
The contents is just a div tag. I don't want to load the div tag just the text itself which does come up in the alert message.
内容只是一个 div 标签。我不想加载 div 标签，而只是加载警报消息中出现的文本本身。
Within a html file, I know I don't really need to use ajax for something so simple however if I can get this to work it will help me with future problems.
在 html 文件中，我知道我真的不需要将 ajax 用于如此简单的事情，但是如果我能让它工作，它将帮助我解决未来的问题。
$.ajax({
type: "GET",
url: "test.html",
dataType: "text",
success : function(data) {
step1j = data;
alert(step1j); // WORKS
return step1j;
}
});
$("#step1").click(function() {
$("#texter").html(step1j);
});
回答by jfriend00
Ajax calls are asynchronous by default so what you have won't work. What I would suggest is using jQuery's .load()which handles the entire loading into a div for you (jQuery reference info here).
默认情况下，Ajax 调用是异步的，因此您所做的将不起作用。我的建议是使用 jQuery 来.load()为你处理整个加载到 div 中（jQuery 参考信息在这里）。
$("#step1").click(function() {
$("#texter").load("test.html");
});
For this to work, the following must be true:
要使其工作，必须满足以下条件：
#step1must exist already at the time you run this initial code (e.g. the DOM must already be loaded to install the.click()handler. For example, you can't install a click handler from code in the<head>tag because the page DOM has not yet loaded.#textermust exist at the time of the click. Please make sure there is no misspelling there.- The URL you are loading must be of the same origin (e.g. same domain) as the web page where you are running the javascript. This is because of the brower's "same origin" security restrictions.
#step1必须在您运行此初始代码时已经存在（例如，必须已加载 DOM 才能安装.click()处理程序。例如，您无法从<head>标记中的代码安装点击处理程序，因为页面 DOM 尚未加载。#texter单击时必须存在。请确保那里没有拼写错误。- 您正在加载的 URL 必须与您运行 javascript 的网页具有相同的来源（例如相同的域）。这是因为浏览器的“同源”安全限制。
Read this answerif you want to learn more about why you can't return data from an asynchronous Ajax call like you were trying to do. Asynchronous calls finish some indeterminate time later and thus the only reliable place to use their results is in the completion callback or in a function that you call from within the completion callback. In this case, .load()is a higher level piece of jQuery functionality that makes this easier.
如果您想了解更多关于为什么不能像尝试那样从异步 Ajax 调用返回数据的信息，请阅读此答案。异步调用在一些不确定的时间后完成，因此使用它们的结果唯一可靠的地方是在完成回调中或在完成回调中调用的函数中。在这种情况下，.load()是一个更高级别的 jQuery 功能，使这更容易。
回答by artm
Try this:
试试这个：
$("#step1").click(function() {
$.ajax({
type: "GET",
url: "test.html",
dataType: "text",
success : function(data) {
$("#texter").html(data);
//step1j = data;
//alert(step1j); // WORKS
//return step1j;
}
});
});
