javascript jQuery 将 url 加载到 div 中并替换当前内容传递 url 以发挥作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15612734/
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
jQuery load url into div and replace current content pass url to function
提问by Ben Paton
I'm trying to call a function called loadPageon click of an atag and pass it a URL to replace the current content in a divcalled mainvia Ajax.
我正在尝试调用一个loadPage在点击a标签时调用的函数，并向它传递一个 URL 以替换通过 Ajaxdiv调用的当前内容main。
However, my code isn't replacing the content already in the main div or even making the Ajax call as far as I can see and I can't see where it's going wrong.
但是，就我所见，我的代码并没有替换主 div 中已有的内容，甚至没有进行 Ajax 调用，而且我看不出哪里出错了。
JavaScript:
JavaScript：
$(document).ready(function () {
function loadPage(urlToLoad) {
$.ajax({
type: "POST",
alert(urlToLoad);
url: urlToLoad,
data: dataString,
success: function (returnedData) {
$('#main').html(returnedData);
}
});
}
});
HTML:
HTML：
<nav>
<ul>
<li><a onclick="loadPage('load.php');" href="javascript:void(0)" class="nav"><img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news</a>
</li>
</ul>
</nav>
<div id="main">
<section id="mainContent">abc</section>
</div>
采纳答案by pala?н
回答by bipen
why do you have alert inside ajax options.. this is throwing the error.. removing that and it should work..
为什么你在ajax选项中有警报..这是抛出错误..删除它，它应该可以工作..
//$(document).ready(function() { <--here
function loadPage(urlToLoad) {
alert(urlToLoad); // you can check that here...
$.ajax({
type: "POST",
// alert(urlToLoad); <--here
url: urlToLoad,
data: dataString,
success: function( returnedData ) {
alert("success") //to check if ajax call is successfull
$('#main').html( returnedData );
}
});
and no need to create a function inside document.ready()... keep it outside the ready function
并且无需在 document.ready() 内创建函数...将其保留在就绪函数之外
回答by Travis J
Your function loadPageis scoped to the closure used for jQuery's document.ready. Later when the function loadPageis called, the call comes from the global scope. As a result, the function will not be accessible. Take your function out of $(document).ready(function(){});
您的函数loadPage的范围是用于 jQuery 的document.ready. 稍后loadPage调用该函数时，该调用来自全局范围。因此，该功能将无法访问。从 $(document).ready(function(){}) 中取出你的函数；
Also note that when attempting to debug using alert(not really recommended, at the very least you should use console.log), that you need to put the alert on its own line of code, and not just in the middle of code like a breakpoint. Your alert should come before the ajax call.
还要注意，当尝试使用alert（不是真的推荐，至少你应该使用console.log）进行调试时，你需要把警报放在它自己的代码行上，而不是像断点一样放在代码中间。您的警报应该在 ajax 调用之前出现。
function loadPage(urlToLoad) {
alert(urlToLoad);
$.ajax({/*...*/});
}
回答by Stefan Candan
You could do it in another way, by adding a custom "data-" attribute to your anchor tags, and using jquery to handle the click event.
您可以通过另一种方式来实现，即向锚标记添加自定义“data-”属性，并使用 jquery 处理点击事件。
$(document).ready(function()
{
$('a.nav').on("click", function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr('data-page'),
data: dataString,
success: function( returnedData ) {
$('#main').html( returnedData );
}
});
});
});
<nav>
<ul>
<li><a data-page="load.php" class="nav"><img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news</a></li>
</ul>
</nav>
<div id="main">
<section id="mainContent">
abc
</section>
</div>
回答by Jai
Moveout the function from the doc readyhandler:
从doc ready处理程序中移出函数：
function loadPage(urlToLoad) {
$.ajax({
type: "POST",
url: urlToLoad,
data: dataString,
success: function (returnedData) {
$('#main').html(returnedData);
}
});
}
$(document).ready(function () {
$('nav a.nav').click(function(e){
e.preventDefault();
loadPage(this.href);
});
});
try with this html:
试试这个 html：
<nav>
<ul>
<li>
<a href="load.php" class="nav">
<img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news
</a>
</li>
</ul>
</nav>
You should not alert in the ajax function properties, so remove the alert from there. It seems that you want it to be work on click of a certain link. So you can try this.
你不应该在 ajax 函数属性中发出警报，所以从那里删除警报。似乎您希望它在单击某个链接时起作用。所以你可以试试这个。
