如何使用jquery将ajax数据加载到div中? [英] How do I load the ajax data into a div with jquery?
问题描述
我想做的是加载一个外部html页面，然后在单击按钮时在div中显示内容.
I'm trying to do is load an external html page then display the contents within a div when a button is clicked.
我收到显示test.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.
内容只是一个div标签.我不想只将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.
在一个html文件中，我知道我真的不需要使用ajax来完成这么简单的事情，但是，如果我可以使用它，它将对以后的问题有所帮助.
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.
$.ajax({
type: "GET",
url: "test.html",
dataType: "text",
success : function(data) {
step1j = data;
alert(step1j); // WORKS
return step1j;
}
});
$("#step1").click(function() {
$("#texter").html(step1j);
});
推荐答案
Ajax调用默认情况下是异步的，因此您无法使用.我建议使用的是jQuery的.load()，它可以为您处理整个加载到div中的情况(jQuery参考信息在这里).
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).
$("#step1").click(function() {
$("#texter").load("test.html");
});
要使其正常工作，必须满足以下条件:
For this to work, the following must be true:
-
在运行此初始代码时，
-
#step1必须已经存在(例如，必须已经加载DOM以安装.click()处理程序.例如，无法从
单击时 -
#texter必须存在.请确保那里没有拼写错误. - 您正在加载的网址必须与运行javascript的网页具有相同的来源(例如，相同的域).这是由于浏览器的相同来源"安全限制.
#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.
阅读此答案如果您想了解更多有关为何无法像您尝试的那样从异步Ajax调用中返回数据的信息.异步调用会在不确定的时间内结束，因此使用其结果的唯一可靠位置是在完成回调中或在完成回调中调用的函数中.在这种情况下，.load()是jQuery功能的更高层次，使其更容易实现.
Read this answer if 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.
这篇关于如何使用jquery将ajax数据加载到div中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
