Question

我需要在html表中向数据显示ajax调用的响应。现在，它仅显示第一个数据数组，而其他未显示。

我使用了append但对我不起作用。是否还有其他方法可以调用所有其他数组。

ajax功能

jQuery.ajax({
    url: "{{ url('/searchq/') }}",
    method: 'get',
    data: {
        clientemail: jQuery('#cemail').val(),
        clientname: jQuery('#cname').val(),
        productname: jQuery('#pname').val(),
        start: jQuery('#startdate').val(),
        end: jQuery('#enddate').val(),
    },
    success: function(result) {
        console.log(result);
        $('#content').html(
            "<td>" + result[0].id + "</td>" +
            "<td>" + result[0].name + "</td>" +
            "<td>" + result[0].product_name + "</td>" +
            "<td>" + result[0].created_at + "</td>"
        );
    }
});

控制台

我也试过了，但是什么也没显示。

             success: function (result) {
                        console.log(result);
                        $("#content").remove();

                        if (result== "err") {
                            alert("Something Happened Wrong! Please Try Again.");
                        } else {
                            var trHTML = '';
                            $.each(result.ReportArr, function (i, obj) {
                                trHTML += '<tr><td>' + obj.id + '</td><td>' + obj.name + '</td><td>' + obj.product_name + '</td><td>' +  obj.created_at + '</td></tr>';
                            });
                            $('#content').append(trHTML);
                        }
                    }

Answer 1

您可以使用$ .each（）方法

...
success: function(result) {
    console.log(result);
    $.each(result,function(index,item){ 
        $('#yourTable').append(
            "<tr>" +
            "<td>" + item.id + "</td>" +
            "<td>" + item.name + "</td>" +
            "<td>" + item.product_name + "</td>" +
            "<td>" + item.created_at + "</td>" +
            "</tr>" 
        );
    });
} 
...

yourTable可能是您的表的ID。在上面的示例中，该表格为结果的每个索引呈现了一个新行。

希望有帮助。

Answer 2

以上两个答案都使用了不必要的DOM查询量。尝试修改这两种解决方案之一，以使用对表的内存引用，以防止出现过多的DOM查询。

我假设您使用以下语句存储要填充的表：

     var myTableBody = $('#my-table-id tbody');

从此开始，您绝对应该使用循环遍历结果数组。我认为jQuery $ .each太冗长，在这种情况下是不必要的，因为返回对象应该是纯JS数组。

    success: function (result) {
       result.forEach(function(resultRow){
          var tableRow = `<tr>
                            <td>
                              ${resultRow.id}
                            </td>
                            <td>
                              ${resultRow.name}
                            </td>
                            <td>
                              ${resultRow.product_name}
                            </td>
                            <td>
                              ${resultRow.created_at}
                            </td>
                           </tr>`;

           myTableBody
             .append(tableRow);
       });
    }

与其他两个解决方案相比，此解决方案最关键的部分是缺少持久性DOM查询。对于100个项目的结果集，我的解决方案仍然只向DOM查询表元素1次。其他解决方案在DOM中查询表元素以获取结果列表中的项目数。

根据Phil在评论中的建议，我还要添加一个地图实现。

    success: function (result) {
      let tableRows = result.map((resultRow) =>
           `<tr>
              <td>
                ${resultRow.id}
              </td>
              <td>
                ${resultRow.name}
              </td>
              <td>
                ${resultRow.product_name}
              </td>
              <td>
                ${resultRow.created_at}
              </td>
            </tr>`;
       );
       myTableBody.append(tableRows);
    }

Answer 3

使用$ .each方法，然后将其附加到表的tbody（如果有tbody）。

jQuery.ajax({
    url: "{{ url('/searchq/') }}",
    method: 'get',
    data: {
        clientemail: jQuery('#cemail').val(),
        clientname: jQuery('#cname').val(),
        productname: jQuery('#pname').val(),
        start: jQuery('#startdate').val(),
        end: jQuery('#enddate').val(),
    },
    success: function(result) {
        console.log(result);

        $.each(result, function(index, item) {
            var el = `
                <tr>
                  <td>${item.id}</td>
                  <td>${item.name}</td>
                  <td>${item.product_name}</td>
                  <td>${item.created_at}</td>
                </tr>
            `;

             $('#content > tbody').append(el);
        });
    }
});

在表内显示ajax jQuery响应

3 个答案: