jquery - 在表中显示 ajax jquery 响应

Question

我需要在 html 表中显示 ajax 调用的响应数据。目前仅显示第一个数据数组，其他数据数组不显示。

我使用了追加，但它对我不起作用。是否有其他方法来调用所有其他数组。

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

上面的两个答案都使用了不必要的 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 在评论中的建议，我还添加了一个 map 实现。

    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);
    }