Question

我确定这是一个常见的问题，但我有一个输入字段和一个按钮。每当按下按钮时，执行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>

Answer 1

您可以append将新结果DEMO发送到现有.html()，而不是使用div删除其内容。对于示例，假设您要将结果附加到ID为div的{{1}}：

results

这是 {{3}} 。

Answer 2

我认为以下内容可行。

<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调用返回的响应，我认为这是您的目标。

多个AJAX回调和创建列表

2 个答案: