1

これはよくある質問だと思いますが、入力フィールドとボタンがあります。ボタンが押されるたびに、文字列を返すajax呼び出しが実行されます。元のファイルのdivにアタッチすると、そのdivによって文字列または数値が消去され、返された文字列に置き換えられることを理解しています。すべてのコールバックを画面にリアルタイムで表示できるようにするための最も効率的な方法は何でしょうか。試しましたが、ajaxコールバックが挿入するdivタグを割り当てるjavascript変数を動的に変更しても機能しないようです。誰かがこのコードの何が悪いのか、またはこのコードを書くためのより効率的な方法、つまりphpなどを知っていますか？

<div id="part1">

<input type="text" id="text"/>

<input type="button" value="button" id="button"/>

</div>

<div id="hidden" class="2"></div>
<div id="part2"></div>
<div id="part3"></div>
<div id="part4"></div>
<div id="part5"></div>

<script type="text/javascript" >

$('#button').click(function () {

    var text = $('#text').val();    

$.post('ajaxskeleton.php', {
                red: text                   
        }, function(){
        var number = $('#hidden').attr("class");
        $('#part' + number).html(text);
        var number = number+1;                      
        var class_name = $('#hidden').attr('class')
        $('#hidden').removeClass(class_name);       
        $('#hidden').addClass(number);
            $('#text').val('');
    });


});


</script>
4

2 に答える 2

1

で内容を消去する代わりに、既存のに新しい結果を追加.html()することができます。たとえば、結果を次のIDでに追加するとします。divdivresults

$('#button').click(function () {
    var text = $('#text').val();    
    $.post('ajaxskeleton.php', { red: text }, function() {
        $("<li>" + text + "</li>").appendTo($("#results"));
    });
});​

これがデモです。

于 2012-08-27T00:33:32.727 に答える
1

次のようなものがうまくいくと思います。

<div id="container">
  <input type="text" id="text"/>

  <input type="button" value="button" id="button"/>
</div>
<ol id="responses"></ol>
$("#button").click(function() {
  $.post('ajaxskeleton.php', {red:text}, function(data) {
    $("#responses").append("<li>" + data + "</li>");
  });
});

これは、Ajax呼び出しから返される応答を含む順序付きリストを作成するだけです。これは、あなたが目指していることだと思います。

于 2012-08-27T00:35:37.680 に答える