帶有Ajax的PHP數組 - 獲取數據的正確方法？

我是一個完整的ajax/php白癡 - 讓我們現在就開始吧;但我已經到了需要一些幫助的地步。我一直在關注着各種教程，並且彙總了一份報告。帶有Ajax的PHP數組 - 獲取數據的正確方法？

最終我有一張表，其中包含我需要的所有數據。我可以得到這些數據並將其正確顯示在表格中，而不會出現問題。我正在嘗試添加允許基於條件進行過濾的「下拉式」框（在此表中有一個名爲'verticals'的列 - 因此下拉列表將包含來自數據庫列的所有不同「垂直行」 - 並且篩選基於垂直的選擇）

表我有所謂的「client.php」客戶端負載得到報告如下前端代碼片段：

Client.php：

<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" href="css/mediacallreport.css"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Generic Title</title> 
</head> 



<body> 
    <h2> Generic Reports </h2> 
    <h3>Report Formatting: </h3> 
    <div id="instruction">Select how you would like the data selected using the dropdowns below</div> 

    <!--DROPDOWNS--> 
Vertical - 
<select name="station" id="station"> 
    <option value="all">All</option> 
    <script id="source" language="javascript" type="text/javascript"> 
     $(function() 
     { 
     $.ajax({          
      url: 'api.php', //the script to call to get data   
      data: "", //you can insert url argumnets here to pass to api.php 
      dataType: 'json', //data format  
      success: function(verticals) //on recieve of reply 
      { 
      for (var i in verticals) 
      { 
      var vertical = verticals[i]; 
      var verticalID = verticals[0]; 

     $('station').append("<option value=\""+verticalID+"\">"+verticalID+"</option>"); 
       } 

      } 
     }); 
     }); 
    </script> 
</select> 

<!--TABLE BEGINNING - TABLE HEADER ROW--> 
<table id="output"> 
<tr> 
<th>ID</th> 
<th>Station_Network</th> 
<th>Vertical</th> 
<th>Creative</th> 
<th>Tolls</th> 
<th>States</th> 
<th>Date Range</th> 
<th>Week</th> 
<th>Ordered</th> 
<th>Credits</th> 
<th>Credits Totals</th> 
<th>Not Used</th> 
<th>Cleared</th> 
<th>Total Uniques</th> 
<th>Cleared Each Unique</th> 
<th>Total Unique Connect</th> 
<th>Cleared Each Unique Connect</th> 
<th>Unique Connect 8am - 8pm</th> 
<th>Cleared Unique 8am - 8pm</th> 
<th>Calls over 10 Min</th> 
<th>Calls over 10 Min %</th> 
</tr> 

<!--JAVASCRIPT TO GET INFORMATION FROM DB, ASSIGN VARIABLES AND PUT INTO TABLE ROWS--> 
    <script id="source" language="javascript" type="text/javascript"> 
    $(function() 
    { 
    //----------------------------------------------------------------------- 
    // 2) SEND HTTP REQUEST WITH AJAX 
    //----------------------------------------------------------------------- 
    $.ajax({          
     url: 'api.php', //the script to call to get data   
     data: "", //you can insert url argumnets here to pass to api.php 
         //for example "id=5&parent=6" 
     dataType: 'json', //data format  
     success: function(rows) //on recieve of reply 
     { 
     for (var i in rows) 
     { 
     var row = rows[i]; 
     var id = row[0];    //get id 
     var station_network = row[1];  //get name 
     var vertical = row[2]; //get vertical 
     var creative = row[3]; //get creative 
     var tolls= row[4]; //get tolls 
     var states= row[5]; //get states 
     var date_range= row[6]; //get date_range 
     var week= row[7]; //get week 
     var ordered= row[8]; //get ordered 
     var credits= row[9]; //get credits 
     var credit_totals= row[10]; //get credit_totals 
     var not_used= row[11]; 
     var cleared= row[12]; 
     var total_uniques= row[13]; 
     var cleared_each_unique= row[14]; 
     var total_unique_connect= row[15]; 
     var cleared_each_unique_connect= row[16]; 
     var unique_connect_8am_to_8pm= row[17]; 
     var cleared_each_8am_to_8pm= row[18]; 
     var calls_over_10= row[19]; 
     var calls_over_10_pct= row[20]; 
     //-------------------------------------------------------------------- 
     // DISPLAY THE CONTENT 
     //-------------------------------------------------------------------- 
     //TABLES (ALTERNATING ROWS) 
     if (id % 2 == 0){ 
     $('#output').append("<tr id=\"evenrow\"> <td>"+id+"</td><td>"+station_network+"</td><td>"+vertical+"</td><td>"+creative+"</td><td>"+tolls+"</td><td>"+states+"</td><td>"+date_range+"</td><td>"+week+"</td><td>"+ordered+"</td><td>"+credits+"</td><td>"+credit_totals+"</td><td>"+not_used+"</td><td>"+cleared+"</td><td>"+total_uniques+"</td><td>"+cleared_each_unique+"</td><td>"+total_unique_connect+"</td><td>"+cleared_each_unique_connect+"</td><td>"+unique_connect_8am_to_8pm+"</td><td>"+cleared_each_8am_to_8pm+"</td><td>"+calls_over_10+"</td><td>"+calls_over_10_pct+"</td></tr>"); 
     } else { 
     $('#output').append("<tr id=\"oddrow\"> <td>"+id+"</td><td>"+station_network+"</td><td>"+vertical+"</td><td>"+creative+"</td><td>"+tolls+"</td><td>"+states+"</td><td>"+date_range+"</td><td>"+week+"</td><td>"+ordered+"</td><td>"+credits+"</td><td>"+credit_totals+"</td><td>"+not_used+"</td><td>"+cleared+"</td><td>"+total_uniques+"</td><td>"+cleared_each_unique+"</td><td>"+total_unique_connect+"</td><td>"+cleared_each_unique_connect+"</td><td>"+unique_connect_8am_to_8pm+"</td><td>"+cleared_each_8am_to_8pm+"</td><td>"+calls_over_10+"</td><td>"+calls_over_10_pct+"</td></tr>"); 
     } 

     } 

     } 
    }); 
    }); 
    </script> 

</body> 
</html>

與我交談api.php api.php：

<?php 
    //-------------------------------------------------------------------------- 
    // Connect to DB 
    //-------------------------------------------------------------------------- 
    include 'DB.php'; 
    $con = mysql_connect($host,$user,$pass) ; 
    $dbs = mysql_select_db($databaseName, $con); 
    //-------------------------------------------------------------------------- 
    // 2) Query database for data 
    //-------------------------------------------------------------------------- 
    //Rows of data in media-analysis 
    $result = mysql_query("SELECT * FROM $tableName");   //query 
    $data = array(); 
    while ($row = mysql_fetch_row($result)) 
    { 
    $data[] = $row; 
    } 



    //Dropdown for Verticals 
    $verticalSql = "SELECT VERTICAL FROM media_analysis GROUP BY VERTICAL"; 
    $verticalResult = mysql_query($verticalSql); 
    $verticalData = array(); 
    while ($verticalRow = mysql_fetch_row($verticalResult)){ 
     $verticalData[] = $verticalRow; 
    } 

    $finalarray = array ('rowdata' => $data, 'verticaldata' => $verticalData); 
    //-------------------------------------------------------------------------- 
    // 3) echo result as json 
    //-------------------------------------------------------------------------- 
    echo json_encode($finalarray); 
?>

在Firebug中，我可以看到整個數據到來，它看起來是這樣的：

{"rowdata":[["1","canceled","canceled","canceled","canceled","canceled","03\/18\/2013-03-24\/2013","12","canceled","0","","","0.00","0","0.00","0","0.00","0","0.00","0","0.00"],["2","Station B","Vertical B","DEBIT","800-555-5555","CA","03\/18\/2013-03-24\/2013","12","$813.00","0","","","813.00","8","101.62","5","162.60","3","271.00","2","40.00"]],"verticaldata":[["canceled"],["Vertical B"]]}

在我開始，包括「下拉菜單」，我只是進行了簡單的json_encode（$的數據）;它會正常工作，表格顯示了我想要的。由於我添加了另一個數組傳遞，這是當事情變得瘋狂，我完全失去了。

我知道我的編碼可能非常差，但我只是想解決這個問題。所有幫助讚賞。

來源

2013-04-01 Hanny

的問題是，在你的成功處理程序的代碼預計要返回數組：

success: function(verticals) //on recieve of reply 
{ 
    for (var i in verticals) 
    { 
     var vertical = verticals[i]; 
     var verticalID = verticals[0]; 

     $('station').append("<option value=\""+verticalID+"\">"+verticalID+"</option>"); 
    } 

}

然而，正如你在你的例子表明，verticals看起來是這樣的：

{"rowdata":[[...],[...]],"verticaldata":[["canceled"],["Vertical B"]]}

由於您可以看到，verticals是一個對象，它包含兩個其他對象（rowdata和verticaldata）。

要使您當前的成功處理程序再次工作，首先需要從AJAX響應中提取verticaldata。只需將代碼更改爲此即可：

success: function(response) //on recieve of reply 
{ 
    var verticals = response.verticaldata; 
    for (var i in verticals) 
    { 
     var vertical = verticals[i]; 
     var verticalID = verticals[0]; 

     $('station').append("<option value=\""+verticalID+"\">"+verticalID+"</option>"); 
    } 
}

來源

2013-04-01 21:13:49 Steve

這將做到這一點！萬分感謝。我仍然是一個noob，但我正在學習，你的解釋正是我所希望的！萬分感謝！ – Hanny

因爲您使用的是PHP和jQuery，所以您可以使用我的庫。外的開箱處理那些來自PHP爲Javascript，反之亦然任何數據）

看到這裏http://phery-php-ajax.net

你的情況，這會是這樣

<?php 
    include('Phery.php'); 

    Phery::instance()->set(array(
    'verticals' => function(data){ 
     $r = new PheryResponse; 

     $verticalResult = mysql_query("SELECT VERTICAL FROM media_analysis GROUP BY VERTICAL"); 

     $r->jquery('.station'); // Select it for subsequent chaining in the loop 
     $i = 0; 
     while ($verticalRow = mysql_fetch_row($verticalResult)){ 
      $r->append('<option value="'.($i++).'">'.$verticalRow['VERTICAL'].'</option>'); // What is VERTICAL? Is that query the real one? 
     } 
     // every "append" call will happen to .station jquery selector automatically 
     return $r; 
    } 
    ))->process(); 
?>

您的JavaScript代碼

$(function(){ 
    phery.remote('verticals'); 
});

就是這樣。爲什麼（重新）產生的數據，當你可以在服務器一旦做到這一點（其中數據生成屬於）

當然，你可以只返回JSON和使用phery:json，但是這不是你的情況實際

return PheryResponse::factory()->json($verticalData);

和JavaScript側

phery.remote('verticals', null, null, false).on('phery:json', function(data){ 
    for (var i in data){ 
    // do your append here 
    } 
});

來源

2013-04-01 21:15:07 pocesar

我確定這是一個很好的解決方案 - 謝謝你把它放在那裏。我會檢查你的圖書館，並將其用於未來！謝謝！ – Hanny

沒問題，它是從客戶端記下必要的代碼開始的，當它直接從PHP操縱HTML時 – pocesar

帶有Ajax的PHP數組 - 獲取數據的正確方法？

回答

相關問題