在表内显示ajax jquery响应

我需要在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>"
        );
    }
});

jQuery.ajax({
url:“{url（'/searchq/'）}}”，
方法：“get”，
数据：{
clientemail:jQuery（'#cemail'）.val（），
clientname:jQuery（'#cname'）.val（），
productname:jQuery（'#pname'）.val（），
start:jQuery（'#startdate'）.val（），
结束：jQuery（'#enddate'）.val（），
},
成功：功能（结果）{
控制台日志（结果）；
$（'#content'）.html(
“”+结果[0]。id+“”+
“”+结果[0]。名称+“”+
“”+结果[0]。产品名称+“”+
“”+结果[0]。已在“”处创建
);
}
});

控制台

我也试过了，但结果什么也没显示

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

成功：函数（结果）{
控制台日志（结果）；
$（“#内容”）.remove（）；
如果（结果=“错误”）{
警报（“发生错误！请重试”）；
}否则{
var trHTML=''；
$.each（result.ReportArr，函数（i，obj）{
trHTML+=''+obj.id+''+obj.name+''+obj.product\u name+''+obj.created\u at+''；
});
$（'#content'）.append（trHTML）；
}
}

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

。。。
成功：功能（结果）{
控制台日志（结果）；
$.each（结果、函数（索引、项）{
$（'#yourTable'）。追加(
"" +
“”+item.id+“”+
“”+item.name+“”+
“”+item.product_name+“”+
“”+item.created_在+“”+
"" 
);
});
} 
...

yourTable

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

---

希望有帮助。

使用$。每个方法，然后将其附加到表的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);
        });
    }
});

jQuery.ajax({
url:“{url（'/searchq/'）}}”，
方法：“get”，
数据：{
clientemail:jQuery（'#cemail'）.val（），
clientname:jQuery（'#cname'）.val（），
productname:jQuery（'#pname'）.val（），
start:jQuery（'#startdate'）.val（），
结束：jQuery（'#enddate'）.val（），
},
成功：功能（结果）{
控制台日志（结果）；
$。每个（结果、功能（索引、项目）{
变量el=`
${item.id}
${item.name}
${item.product_name}
${item.created_at}
`;
$（'#content>tbody'）。追加（el）；
});
}
});

以上两个答案都使用了不必要的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);
       });
    }

成功：函数（结果）{
result.forEach（函数（resultRow）{
var表格行=`
${resultRow.id}
${resultRow.name}
${resultRow.product_name}
${resultRow.created_at}
`;
myTableBody
.附加（表格行）；
});
}

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

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

成功：函数（结果）{
让tableRows=result.map（（resultRow）=>
`
${resultRow.id}
${resultRow.name}
${resultRow.product_name}
${resultRow.created_at}
`;
);
myTableBody.append（tableRows）；
}

你的

$不应该。每个
都在
结果上。从您的控制台输出来看，肯定不会出现
result.ReportArr
propertyNice答案。您还可以
将
结果
数组映射到一个
字符串数组中，并使用该数组调用
append（）
仅一次：）@Phil，我用array.prototype.map实现更新了帖子。如果您有其他编辑，请告诉我@blackbird，如果您喜欢这个解决方案，请将其更新为您接受的答案好吗？@RyanShohoney我认为您不想在
map
@Phil中的HTML字符串周围使用大括号，经过大量阅读，您是对的。在这种情况下，大括号是不合适的，可能会破坏“解决方案”。我已经更新了它来说明这一点。谢谢你的努力！
    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);
    }