jQuery - 需要访问成功 ajax POST 操作后收到的 PHP 数组值

Question

平台：

jQuery、PHP、mySQL

我有什么：

我正在使用 jQuery 处理来自表单的信息并将所有 POST 数据发送到一个 php 文件，该文件执行多个操作并返回一个数据数组以及其他必要的数据。其中一个数组是数组的数组。我需要以可以将每个嵌套数组值附加到表的方式访问这个数组值数组。

我需要什么：

我一直在努力使用 jquery 代码来让它工作很长时间，但它不起作用。因此，如果有人可以帮助我解决 jquery 代码，我将不胜感激。提前致谢。

表格结构

fname   lname    city
Ed        Al      SA
Bob       B       MN
Chris     V       KJ

PHP 代码

//Content of my PHP file that return json encoded data
$success = 1;

$new_rows_data['fname'] = array();
$new_rows_data['lname'] = array();
$new_rows_data['city'] = array();

$result = mysql_query("SELECT fname, lname, city FROM table LIMIT 3");
while( $row = mysql_fetch_array($result) ) 
{
    $new_rows_data['fname'][] = $row['fname'];
    $new_rows_data['lname'][] = $row['lname'];
    $new_rows_data['city'][]  = $row['city']
}

print json_encode(array('success' => $success, 'new_rows_data' => $new_rows_data)); 

jQuery 代码：

$('#button_delete').click(function() {  

  $.ajax({
   type: 'POST',  
   cache: false,
   url: 'test.php',
   data: $('#form1').serialize(), 
   dataType: 'json',
   success: function(data) {            

      if(data.success == '1')
      {
             jQuery.each(data.new_rows_data, function(i, val) 
            {
                 $('#table').append('<tr>'+

                          '<td>'+val.fname+'</td>'+           
                          '<td>'+val.lname+'</td>'+           
                          '<td>'+val.city+'</td>'+           

                  '</tr>');   

            });
      }//END if
     }       
   }) //END ajax

  return false;
});

我正在尝试将这些新数据附加到具有 id # 表的现有表中，以便我看起来像以下 DESIRED OUTPUT：

First Name   Last Name  City
  Orko           C      OI    ---> (Existing row of data)
  Gordon        Flash   KS    ---> (Existing row of data)
  Ed             Al      SA    ---> New row of data that just got appended
  Bob            B       MN    ---> New row of data that just got appended
 Chris           V       KJ    ---> New row of data that just got appended 

Answer 1

当我开始在其中组合文本和对象时，Append 对我来说从来都不是很友好。试试这个：

$.each(data.new_rows_data, function(i, val) {
   var tr = $('<tr></tr>');

   $.each(val, function(i, newVal){
      var td = $('<td></td>').text(newVal);
      tr.append(td);
   });

   $('#table').append(tr);
});

应该完成工作。

更改为 3 列的多行：

最好将您的 PHP 数组构建更改为：

$result = mysql_query("SELECT fname, lname, city FROM table LIMIT 3");
$i = 0;
while( $row = mysql_fetch_array($result) ) 
{
    $new_rows_data[$i]['fname'] = $row['fname'];
    $new_rows_data[$i]['lname'] = $row['lname'];
    $new_rows_data[$i]['city']  = $row['city'];
    $i++;
}

Answer 2

我刚从搜索中发现这个，想指出你的代码在哪里：

$new_rows_data['fname'][] = $row['fname'];
$new_rows_data['lname'][] = $row['lname'];
$new_rows_data['city'][]  = $row['city'];

这里发生的是您正在构建多个并行数组。在 javascript 中，单个值将可见，例如data.new_rows_data.fname[0] 为第一行的 fname。当您对此执行 $.each(...) 时，您的函数应该看到 i=="fname" 和 val 的参数等于一个 3 元素的名字数组。

munch 的答案通过显式索引完成了同样的事情，但对于您的具体情况，我会这样编码：

$new_rows_data[] = $row;

或者对于计算值不是那么简单的情况：

$new_rows_data[] = array(
    'foo' => get_foo($row),
    'bar' => $row['bar']
);

在任何一种情况下，new_rows_data 都会变成一个对象数组，其属性与您的 PHP 数组键匹配，可以在 javascript 中以 data.new_rows_data[1].fname 访问。您的 $.each(...) 循环现在会将 i 视为整数，将 val 视为具有您期望的属性的对象。

Answer 3

我看到的第一个问题是打字松散：

if(data.success === 1)

应该是

if(data.success == '1')

因为就javascript而言，所有从AJAX返回的数据都是一个字符串。我刚刚从@Jammus 注意到，您的 PHP 代码还应该将您的 $success 变量切换为具有 0 或 1 的值。