当形式选择更改时，Ajax呼叫太多

Question

我的网页有两个主要部分：（1）用于访问数据库信息的搜索条件（以表单为form的选择框），以及（2）显示结果的DIV。当页面最初加载时，表单中的默认值将被序列化并通过AJAX发送至PHP，并渲染结果。该结果部分被分页，以通过单击下一步，上一个，等等来显示所有结果。这一切都很好。

这是一个问题：每次用户更改标准，并且表单的数据被序列化并通过Ajax发送，以某种方式添加了另一层结果。在浏览结果时，它将为每个"层"处理第2页，但仅在网页上显示从服务器到达的最后一个。因此，每次进行其他更改时，都会添加另一层。由于Ajax是异步的，因此显示的结果可能是正确的"层"。

html：

<form id='submitCriteria' action='' method='post'>
    <select id='selLevel' class='selectpicker'  name='levels'>
        <option title='Levels' value='No Preference' 
            selected = 'selected'>No Preference</option>
        <option title='Levels:<br>  1+' value=1 >1+ </option>
        <option title='Levels:<br>  2+' value=2 >2+ </option>
        <option title='Levels:<br>  3+' value=3 >3+ </option>
    </select>
</form>
<!-- Pagination: -->
<div id="spinnerDet" class="spinnerA">
</div>
<div id="paginationdiv"> 
    <div id="pagination_container">
        <div class="pagination">
            <ul><li class="inactive">Previous</li>
                <li class="pagerange">
                    <span class="total" a=" 58">
                        Page 1 of 58 </span></li>
                <li p="2" class="active">Next</li>
            </ul>
        </div>
        <!-- Output from server: -->
        <table>
            <tr><td>Levels</td><td>3</td></tr>
        </table>
    </div>
</div>

javascript/jquery：

$("#submitCriteria").change(function(e) { 
    e.preventDefault();
    e.stopPropagation();
    $.ajax({
         type: 'post',
         data: $("#submitCriteria").serialize(),
         url: "/load_plans.php",
         success: function(data) {
             paginateDetails (data)
         },
    });
    return false;
});
function paginateDetails (data) {
   selDetails = JSON.parse(data); 
   var levels = selDetails.levels;
   var totalsline = "Number of levels: " + levels;
   $('#numResults').removeClass('spinnerA');
   $('#numResults').addClass('stop-spin'); 
   $('#numResults').html(totalsline);  
   loadData(1); //initial output based on default values
   // Pagination buttons event:
   $('#paginationdiv').on('click touchend', 
   '#pagination_container .pagination li.active', function (e) {
       e.stopPropagation(); 
       e.preventDefault(); 
       var page = $(this).attr('p');
       loadData(page);
   });
   function loadData(page) { 
       $.ajax({
           type: "POST",
           data: eval("'page=' + page + '&levels=' + levels"),
           url: "loadDetails.php",
           success: function (msg) {
               $("#pagination_container").ajaxComplete(function (event, request, settings) {
                   $("#pagination_container").html(msg);
               });
           }
       });
   }
}

更改/更新表单中的选择时，如何消除另一个"图层"？

Answer 1

我认为问题与您的代码结构有关，在这种情况下，您不应该嵌套功能。另外，您会反复将单击事件附加到#paginationdiv（在重新加载数据时是否将其删除并重新处理？您应该在这种情况下使用类而不是DIV）。

如果不尝试代码，我相信您的问题可能是由您的LoadData函数引起的 - 在您的成功回调中，您无需连接Ajax再次完成，当您的请求完整且成功时，成功就会拨打成功。我相信您的代码的一部分是触发了两次（成功及其射击时触发时）

您的重构代码应该看起来像这样：

$("#submitCriteria").change(function(e) { 
    e.preventDefault();
    e.stopPropagation();
    $.ajax({
        type: 'post',
        data: $("#submitCriteria").serialize(),
        url: "/load_plans.php",
        success: function(data) {
            paginateDetails (data)
        },
    });
    return false;
});
function loadData(page) { 
    $.ajax({
        type: "POST",
        data: eval("'page=' + page + '&levels=' + levels"),
        url: "loadDetails.php",
        success: function (msg) {
            //$("#pagination_container").ajaxComplete(function (event, request, settings) {
                $("#pagination_container").html(msg);
            //});
        }
    });
}
function paginateDetails (data) {
    selDetails = JSON.parse(data); 
    var levels = selDetails.levels;
    var totalsline = "Number of levels: " + levels;
    $('#numResults').removeClass('spinnerA');
    $('#numResults').addClass('stop-spin'); 
    $('#numResults').html(totalsline);  
    loadData(1); //initial output based on default values
    // remove previous click handlers
    $('#paginationdiv').off()
    // Pagination buttons event:
    $('#paginationdiv').on('click touchend', 
    '#pagination_container .pagination li.active', function (e) {
        e.stopPropagation(); 
        e.preventDefault(); 
        var page = $(this).attr('p');
        loadData(page);
    });
}