Question

我的网页有两个主要部分：（1）用于访问数据库信息的搜索条件（表单中的选择框），以及（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

我认为问题在于代码的结构，在这种情况下，您不应该嵌套函数。你也反复将click事件附加到#paginationdiv（当你重新加载数据时它会被移除并重新加载吗？在这种情况下你应该使用class而不是div。）

如果不尝试代码，我相信您的问题可能是由您的loadData函数引起的 - 在您的成功回调中，您不需要再次挂钩ajax，当您的请求完成并成功时调用成功。我相信你的部分代码触发了两次（成功时和ajaxComplete被触发时）

您重构的代码应如下所示：

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

当表单选择发生变化时，调用的ajax太多

1 个答案: