Question

我正在点击loadPage标记时调用名为a的函数，并将其传递给URL以替换名为div的{{1}}中的当前内容通过Ajax。

但是，我的代码并没有替换主div中已有的内容，甚至没有尽可能地调用Ajax，我也看不出它出错的地方。

JavaScript的：

main

HTML：

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

Answer 1

您只需使用load执行此操作：

function loadPage(urlToLoad) {
    $('#main').load(urlToLoad, function () {
        alert('Load was performed.');
    });
}

Answer 2

为什么你在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（）中创建函数...将其保留在就绪函数

之外

Answer 3

您的函数loadPage的范围限定为用于jQuery的document.ready的闭包。稍后调用函数loadPage时，调用来自全局范围。因此，该功能将无法访问。从$（document）.ready（function（）{}）;

中取出你的函数

另请注意，尝试使用alert进行调试时（不是真的建议，至少应该使用console.log），您需要将警报放在自己的代码行上，并且不仅仅是像断点这样的代码中间。您的警报应该在ajax呼叫之前发出。

function loadPage(urlToLoad) {
 alert(urlToLoad);
 $.ajax({/*...*/});
}

Answer 4

您可以通过向锚标记添加自定义“data-”属性，并使用jquery处理click事件，以另一种方式执行此操作。

$(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>

Answer 5

从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函数属性中发出警报，因此请从那里删除警报。您似乎希望它能够点击某个链接。所以你可以试试这个。

jQuery加载url到div并替换当前内容传递url到函数

5 个答案: