1

ボタンがクリックされたら処理ページにデータを送信する必要があるこのコードがあります

<button id="whatever" onclick="sendData(); echoContent();">Send</button>

コード自体は次のとおりです。

function echoContent() {
   $('#main_content').load('parts/echo.php');
}

function clearField() {
   document.getElementById("content_input").value='';
   document.getElementById("header_input").value='';
}
function sendData() {
   var header = jQuery('#header_input').val();
   var content = jQuery('#content_input').val();

   jQuery.ajax({
      type: 'POST',
      url: 'parts/addData.php',
      data: {
          header: header,
          content: content
      }
    });

    clearField();

}

そして、ページが読み込まれ、ボタンがクリックされると更新されます。

<div id="main_content"><script type="text/javascript"> echoContent(); </script></div>

echoContent()ボタンを1回クリックすると機能に問題はありませんが、2回目はコンテンツが更新されません

関数の配置に誤りがあるのでしょうか？

4

3 に答える 3

5

問題は、jQuery.load()がデフォルトで呼び出しをキャッシュするため、.ajax()代わりに with cache オプションを使用するか、次のコードでグローバル ajax キャッシュを無効にする必要があることです。

$.ajaxSetup ({ cache: false });

スクリプトの開始時にそれを実行すると、.load()呼び出しはキャッシュされず、呼び出すたびに新しいコンテンツが表示されます。

于 2013-04-26T14:47:24.190 に答える
1

OK!,または次の最適なコードを試してください:

<script type="text/javascript">

    function echoContent() {

        $.ajax({
            url: "parts/echo.php",
            type: 'GET',
            data: null,
            dataType: 'html',
            beforeSend: function () { 
                $('#main_content').html("Loading data...");
            },
            success: function (data) {
               $('#main_content').html(data);
            },
            complete: function () { 
            },
            error: function (error) {
                console.error(error);
            }
        });

    }

    function clearField() {

        $("#content_input").val(""); 
        $("#header_input").val("");

    }

    function sendData() {

     var header = $('#header_input').val(); 
     var content = $('#content_input').val(); 

     $.ajax({
            url: "parts/addData.php",
            type: 'POST',
            data: {
                header: header,
                content: content
            }, 
            beforeSend: function () {  
            },
            success: function (data) {
               if($.trim(data)){
                    clearField();
                    echoContent();
               }
            },
            complete: function () { 
            },
            error: function (error) {
                console.error(error);
            }
        });

    }  

$(function(){

    echoContent();

    $("#whatever").click(function(){
        sendData(); 
    });

});

</script>

<div id="main_content"></div>
<button id="whatever">Send</button>
于 2013-04-26T14:54:34.517 に答える
-1

いくつかのことが間違っている可能性があります。

まず、sendData 関数は非同期です。Javascript インタープリターは、sendData の $.ajax 呼び出しが完了するのを待たずに、すぐに echoData 関数を呼び出します。これを行うより良い方法は、次のように $.ajax の成功ハンドラーから echoContent を呼び出すことです。

また、 $.load 呼び出しの前に #main_content の内容を消去したい場合があります:

function echoContent() {    
    $('#main_content')
        .html('') // clear it out
        .load('parts/echo.php');
}

function sendData() {
    var header = jQuery('#header_input').val();
    var content = jQuery('#content_input').val();

    jQuery.ajax({
        type: 'POST',
        url: 'parts/addData.php',
        data: {
            header: header,
            content: content
              }
         },
        success(response) {
            // Runs when addData.php is finished
            echoContent();
        });

      clearField();

   }
于 2013-04-26T14:47:27.793 に答える