多个AJAX回调和创建列表

我确定这是一个常见的问题，但我有一个输入字段和一个按钮。无论何时按下按钮，执行ajax调用都会返回一个字符串。我明白，如果您将它附加到原始文件中的div，该div将删除其中的任何字符串或数字，并替换为返回的字符串。什么是最有效的方式来让每一个回调实时显示在屏幕上？我尝试过，但似乎动态地改变了指定哪个div标记ajax回调插入的javascript变量不起作用。有谁知道无论什么不对这个代码或更有效的方式来写这个代码，即用php等多个AJAX回调和创建列表

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

来源

2012-08-27 jason328

，而不是与.html()删除它的内容，你可以append新成果，以现有的div。对于例如，假设你想用ID results追加结果到div：

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

这里有一个DEMO。

来源

2012-08-27 00:33:32

感谢它的工作。由于您首先发布的内容是正确的，因此我将支票寄给您。 – jason328

JS提琴演示也提供了，绝对是更好的答案。这里没有抱怨。 –

我觉得像下面这样的东西会起作用。

<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>"); 
    }); 
});

这只是建立了与来自阿贾克斯回电话答复，我认为这是你的目标是做一个有序列表。

来源

2012-08-27 00:35:37

多个AJAX回调和创建列表

回答

相关问题