jQuery/AJAX将数据附加到DIV，而不是在第二次表单提交时更新当前结果

大家好，我是AJAX编程新手，但我已经设法让我的部分代码按照我希望的方式运行。我希望你们能帮助我克服这个障碍，我想提前感谢你们，感谢你们通过这个网站为我提供的帮助

目前，我有：

带有两个输入字段的表单（onClick），它通过AJAX将数据发送到php脚本，该脚本返回一个总线细节数组

我已成功地将总线信息附加到$（'#main'）div

我需要帮助的是

第一个AJAX调用有效，之后的任何调用也有效。但是，每次我再次提交表单时，在第一次成功调用后，结果不会用新信息更新。取而代之的是，新的搜索结果被添加到以前的搜索结果的末尾，我得到的是一长串总线，而不仅仅是我在搜索字段中指定的总线

<script type="text/javascript">
$(document).ready(function() {
$("#date").datepicker({
   showOtherMonths: true,
   selectOtherMonths: true,    
   changeMonth:true,
   changeYear:true,
   numberOfMonths:1,
   showButtonPanel:true,
   showOn: "button",
   buttonImage: "images/calendar.gif",
   buttonImageOnly: true,
   dateFormat:'yy-mm-dd'
});

$('#search1').click(function(){
    var date = $('#date').val();
    var location = $('#location').val();
    var datastring = 'date=' + date + '&location=' + location;
    $.ajax({
        type: "POST",
        cache: "true",
        url: "search.php",
        datatype:"json",
        data: datastring,
        success: function(data){
            $main = $('#main');

            for ($i = 0, $j = data.bus.length; $i < $j; $i++) {

                  $("#main").append('<div>' + data.bus[$i].number + '</div>');
                  $("#main").append('<div>' + data.bus[$i].capacity + '</div>');
                  $("#main").append('<div>' + data.bus[$i].time + '</div>');
                  $("#main").append('<div>' + data.bus[$i].seats + '</div>');
              }
        }
    });

    return false;
     });
});

</script>

如何更新第一次调用，以便只得到一组可以刷新/更新的总线详细信息

---解决-------- 这就是我最后做的：

关于AJAX的成功：

        success: function(data){

        $('#main').html('')

        for ($i = 0, $j = data.bus.length; $i < $j; $i++) {
            var html = '<div id="bus_detail">';
            html +=  '<div id="capacity">' + data.bus[$i].capacity + '</div>';
            html +=  '<div id="time">' + data.bus[$i].time + '</div>';
            html +=  '<div id="seats">' + data.bus[$i].seats + '</div>';
            $('#main').append(html);
          }
    }

成功：函数（数据）{
$（'#main'）.html（''）
对于（$i=0，$j=data.bus.length；$i<$j；$i++）{
var html=''；
html+=''+数据。总线[$i]。容量+''；
html+=''+data.bus[$i].time+''；
html+=''+data.bus[$i].seats+''；
$（'#main'）.append（html）；
}
}

---

感谢@mightyflow的提示

您将所有结果附加到main-div。 您可以使用创建一个新的

var newContent=document.createElement（'div'）

，将此新div用于appendings$（newContent）。appending

最后说$（'#main'）.html（$（newContent.html（））

这样，您可以将所有新信息放在临时div中，然后覆盖main-div

---

希望有帮助

将所有结果附加到main-div。 您可以使用创建一个新的

var newContent=document.createElement（'div'）

，将此新div用于appendings$（newContent）。appending

最后说$（'#main'）.html（$（newContent.html（））

这样，您可以将所有新信息放在临时div中，然后覆盖main-div

---

希望有帮助

另一种方法是在添加新信息之前，在附录前使用$（'main'）.html（''）清除主div=）

另一种方法是在添加新信息之前，在附录前使用$（'main'）.html（''）清除主div=）

谢谢您的快速回答。我正在考虑使用AJAX beforeSend选项创建“临时div”，然后在success函数中使用replaceWith（）填充div。这是个好主意吗？嗯。。。我不太清楚。首先，您有两个位置可以添加代码，当您稍后再次看到代码时，这可能会令人困惑。另一方面，我不知道你是否可以使用success函数中的临时div，除非你真的在DOM中创建了临时div。谢谢你的快速回答。我正在考虑使用AJAX beforeSend选项创建“临时div”，然后在success函数中使用replaceWith（）填充div。这是个好主意吗？嗯。。。我不太清楚。首先，您有两个位置可以添加代码，当您稍后再次看到代码时，这可能会令人困惑。另一方面，我不知道是否可以使用success函数中的临时div，除非您真的在DOM中创建了临时div。如果#search1是输入字段，那么在单击时会发送ajax请求。但是嘿。。。只要您对结果感到满意，一切都很酷=）如果#search1是输入字段，那么在单击该字段时会发送ajax请求。但是嘿。。。只要你对结果满意，一切都很酷=）

        success: function(data){

        $('#main').html('')

        for ($i = 0, $j = data.bus.length; $i < $j; $i++) {
            var html = '<div id="bus_detail">';
            html +=  '<div id="capacity">' + data.bus[$i].capacity + '</div>';
            html +=  '<div id="time">' + data.bus[$i].time + '</div>';
            html +=  '<div id="seats">' + data.bus[$i].seats + '</div>';
            $('#main').append(html);
          }
    }