jquery - 无法使用 ajax 显示数据？

Question

嗨，我是 php 和 ajax 的新手，我在 php 中编写了一个选择查询，并将结果推送到一个数组中，我正在尝试使用 ajax 以表格格式显示结果，因为我编写了一个 ajax 调用，如下所示

$.ajax({
        type:"POST",
        url:"propage.php",
        dataType:"json",
        data:{
          action:"addFilter",
           pid:pid,
           
         },
        success : function(filres)
        { 
          
          if(filres.status==1)
          {
            { $.each(filres.data, function(i, row) { 
              var row = "<tr>"; 
              row += "<td>" + row.filter_id + "</td>"; 
              row += "<td>" + row.name + "</td>";
              row += "<td>" + row.filter + "</td>";
              row +="<td>"<a href=>Delete</a>"</td>";
              row += "</tr>"; 
              $("#table_filter").append(row); 
            }); 
          }
        }
          else
          {
            $("#get_msg").html("<p style=\'color:red;font-weight:bolder;\'>"+filres.data+"</p>");
          }
        }
    
      });
      return false;
    });

但是在表中我得到的数据是未定义的，但是当我点击按钮时，我在网络选项卡中得到的数据如下

data: [{filter_id: "1", name: "ss", filter: "SOCIAL SECURITY"},…]

谁能帮我解决这个问题？

Answer 1

您可以使用 forEach功能来做到这一点。

它不起作用的原因是在您使用 a 元素的 td 项目中有一些语法错误，而且您还需要一些额外的括号数据。您还使用相同的 var row 从 .each 获取数据并分配给您的表。

运行下面的代码片段以查看它是否正常工作。

//Your data
let filres = {
  data: [{
    filter_id: "1",
    name: "ss",
    filter: "SOCIAL SECURITY"
  }]
}

//Foreach function
filres.data.forEach(function(item) {
  var row = "<tr>";
  row += "<td>" + item.filter_id + "</td>";
  row += "<td>" + item.name + "</td>";
  row += "<td>" + item.filter + "</td>";
  row += "<td><a href=>Delete</a></td>";
  row += "</tr>";
  $("#table_filter").append(row);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table_filter">

</div>

将您的 ajax 更改为以下所有内容都应该可以正常工作。

$.ajax({
  type: "POST",
  url: "propage.php",
  dataType: "json",
  data: {
    action: "addFilter",
    pid: pid,
  },
  success: function(filres) {
    if (filres.status == 1) {
        //Foreach function
          filres.data.forEach(function(item) {
            var row = "<tr>";
            row += "<td>" + item.filter_id + "</td>";
            row += "<td>" + item.name + "</td>";
            row += "<td>" + item.filter + "</td>";
            row += "<td><a href=>Delete</a></td>";
            row += "</tr>";
            $("#table_filter").append(row);
          })
       } else {
        $("#get_msg").html("<p style=\'color:red;font-weight:bolder;\'>" + filres.data + "</p>");
      }
   }
});