3

loadPageタグのクリックで呼び出される関数を呼び出し、aそれにURLを渡して、Ajax経由でdiv呼び出された現在のコンテンツを置き換えようとしています。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

関数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

別の方法で、カスタムの「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>
于 2013-03-25T10:38:09.450 に答える
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 に答える