Question

我有一个（重）函数从php / sql中获取一些数据，然后在html中呈现它。当我第一次加载页面时，我调用此函数，一切都很好。当我点击一个按钮时，我也在成功进行其他ajax调用后调用此函数，但随后我的浏览器冻结并崩溃。我在Firefox和Chrome中遇到错误（页面没有响应）。

这里（重）功能：

function getMinerAttributesByType(type) {
    $.ajax({
        type    : "POST",
        url     : "/app/ajax/DataminerAjax.php",
        dataType: "json",
        timeout : 8000,
        data    : {getMinerAttributesByType:type}
    }).success(function(json){
        $tableConfigured = $("#keywordsgroupsConf tbody");
        $tableConfigured.html("");
        $tableUnconfigured = $("#keywordsgroups tbody");
        $tableUnconfigured.html("");
        $.each(json, function(key, value){
            var $table;
            if (value.configured == 0) {
                $table = $tableUnconfigured;
            } else {
                $table = $tableConfigured;
            }
            $table.append('<tr>' +
                          '<td>' + value.name + '</td>' +
                          '<td><button class="btn btn-info" data-toggle="collapse" data-target="#'+ value.id+'-subs" data-id="'+ value.id +'" data-init="0">Config</button></td>' +
                          '</tr>' +
                          '<tr class="dataset">' +
                          '<td colspan="2" class="subrow">' +
                          '<div style="background:#eee;" class="accordian-body collapse" id="'+ value.id+'-subs">' +
                          '<table style="margin-bottom: 10px;" class="table" id="table-' + value.id + '" data-id="' + value.id + '">'+
                          '<tbody>' +
                          '</tbody>' +
                          '</table>'+
                          '<div style="margin-left:10px;" class="input-append">'+
                          '<input type="text" placeholder="Keywordgroup name">'+
                          '<button class="btn btn-create-keywordgroup" data-id="' + value.id + '"><i class="icon icon-plus"></i> Add</button>'+
                          '<button class="btn btn-success btn-mark-as-c" data-id="' + value.id + '"><i class="icon-white icon-check"></i> Mark as configured</button>' +
                          '</div>' +
                          '</div>' +
                          '</td>'+
                          '</tr>');
        });
    });
}

这里调用函数并在之后崩溃的函数：

$(document).on("click", ".btn-mark-as-c", function(){
    if (confirm("Are you sure you want to mark this attribute as configured?")) {
        $this = $(this)
        var id = $this.attr("data-id");
        $.ajax({
            type    : "POST",
            url     : "/app/ajax/DataminerAjax.php",
            dataType: "json",
            data    : {updateMinerAttributeState:id, state:1}
        }).success(function(json){
            if (json.status == "success") {
                // crashes here in this call of the heavy function
                getMinerAttributesByType(1);
            } else {
                alert("There was an error!");
            }
        });
    }
});

有人指针？

Answer 1

我没有50个代表所以我不能发表评论但是你不能将那一大块HTML格式化为PHP文档，然后使用AJAX来调用PHP并返回结果吗？然后使用$ table.append（result）？

例）

    <script type="text/javascript">
    jQuery(document).on('click', '.menuItem', function()
    {   
        event.preventDefault();
        var mainCategory = $(this).attr('id').split('xx')[0];
            $.ajax({                                                          
                  url: '/php/SubMenuBar.php',  <----- Access the PHP file.       
                  data: {
                          MainCategory: mainCategory, <---- Parameters for the PHP file (declared using $_GET() in the PHP file)
                        },

                  success: function(result) <--- Result becomes the output from the PHP file
                  {
                        $table.append(result); 
                  }
                });

Answer 2

不是一次将行附加到DOM中，而是将它们连接成一个字符串，然后一次性添加它们。

function getMinerAttributesByType(type) {
    $.ajax({
        type    : "POST",
        url     : "/app/ajax/DataminerAjax.php",
        dataType: "json",
        timeout : 8000,
        data    : {getMinerAttributesByType:type}
    }).success(function(json){
        var $tableConfigured = $("#keywordsgroupsConf tbody");
        var $tableUnconfigured = $("#keywordsgroups tbody");
        var rowsConfigured = '', rowsUnconfigured = '';
        $.each(json, function(key, value){
            var row = '<tr>' +
                '<td>' + value.name + '</td>' +
                '<td><button class="btn btn-info" data-toggle="collapse" data-target="#'+ value.id+'-subs" data-id="'+ value.id +'" data-init="0">Config</button></td>' +
                '</tr>' +
                '<tr class="dataset">' +
                '<td colspan="2" class="subrow">' +
                '<div style="background:#eee;" class="accordian-body collapse" id="'+ value.id+'-subs">' +
                '<table style="margin-bottom: 10px;" class="table" id="table-' + value.id + '" data-id="' + value.id + '">'+
                '<tbody>' +
                '</tbody>' +
                '</table>'+
                '<div style="margin-left:10px;" class="input-append">'+
                '<input type="text" placeholder="Keywordgroup name">'+
                '<button class="btn btn-create-keywordgroup" data-id="' + value.id + '"><i class="icon icon-plus"></i> Add</button>'+
                '<button class="btn btn-success btn-mark-as-c" data-id="' + value.id + '"><i class="icon-white icon-check"></i> Mark as configured</button>' +
                '</div>' +
                '</div>' +
                '</td>'+
                '</tr>';
            if (value.configured == 0) {
                rowsUnconfigured += row;
            } else {
                rowsConfigured += row;
            }
        });
        $tableConfigured.html(rowsConfigured);
        $tableUnconfigured.html(rowsUnconfigured);
    });
}

jQuery Ajax Call崩溃所有浏览器

2 个答案: