3

我正在尝试调用一个loadPage在单击a标签时调用的函数并将其传递给 URL 以替换通过 Ajaxdiv调用的当前内容。main

但是，据我所知，我的代码并没有替换主 div 中已经存在的内容，甚至没有进行 Ajax 调用，而且我看不出哪里出了问题。

JavaScript：

$(document).ready(function () {
    function loadPage(urlToLoad) {
        $.ajax({
            type: "POST",
            alert(urlToLoad);
            url: urlToLoad,
            data: dataString,
            success: function (returnedData) {
                $('#main').html(returnedData);
            }
        });
    }
});

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>
4

5 回答 5

3

你可以简单地使用load：

function loadPage(urlToLoad) {
    $('#main').load(urlToLoad, function () {
        alert('Load was performed.');
    });
}
于 2013-03-25T10:41:54.817 回答
1

为什么你在 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 );
          }
        });

并且无需在 document.ready() 中创建函数...将其保留在 ready 函数之外

于 2013-03-25T10:33:22.463 回答
0

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.

$(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>
于 2013-03-25T10:38:09.450 回答
0

您的函数loadPage的作用域是用于 jQuery 的闭包document.ready。稍后调用该函数时loadPage，该调用来自全局范围。因此，该功能将无法访问。把你的函数从 $(document).ready(function(){});

另请注意，在尝试使用调试时alert（不是真的推荐，至少您应该使用console.log），您需要将警报放在它自己的代码行上，而不仅仅是像断点那样放在代码中间。您的警报应该出现在 ajax 调用之前。

function loadPage(urlToLoad) {
 alert(urlToLoad);
 $.ajax({/*...*/});
}
于 2013-03-25T10:33:50.437 回答
0

从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);
   });
});

试试这个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>

您不应该在 ajax 函数属性中发出警报，因此请从那里删除警报。似乎您希望它在单击某个链接时起作用。所以你可以试试这个。

于 2013-03-25T10:42:54.557 回答