带有 Ajax 的 PHP 数组 - 获取数据的正确方法？
Posted
技术标签:
【中文标题】带有 Ajax 的 PHP 数组 - 获取数据的正确方法？【英文标题】：PHP arrays with Ajax - Proper way to get the data? 【发布时间】：2013-03-23 00:35:40 【问题描述】：我是个彻头彻尾的 ajax/php 白痴——让我们现在就解决这个问题；但我已经到了需要帮助的地步。我一直在这里和那里学习各种教程，并整理了一份报告。
最终我有一个包含我需要的所有数据的表。我可以获取该数据并在表格中适当地显示它而不会出现问题。我正在尝试添加允许根据条件进行过滤的“下拉”框（此表中有一个名为“垂直”的列 - 因此下拉列表将包含数据库列中的所有不同“垂直” - 和根据垂直的选择过滤表格）
我有一个名为“client.php”的前端sn-p，客户端加载它来获取报告：
客户端.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 ($data);它会正常工作，并且表格完全显示了我想要的方式。由于我添加了另一个要传递的数组，所以事情变得疯狂，我完全迷失了。
我知道我的编码可能很差，但我只是想解决这个问题。感谢所有帮助。
【问题讨论】：
【参考方案1】：问题是成功处理程序中的代码需要返回一个数组：
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>");
【讨论】：
这样就可以了！万分感谢。我仍然是菜鸟，但我正在学习，你的解释正是我所希望的！非常感谢！【参考方案2】：由于您使用的是 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
);
【讨论】：
我确信这是一个很好的解决方案 - 谢谢你把它放在那里。我将检查您的图书馆并在将来使用它！谢谢！ 没问题，当它是关于直接从 PHP 操作 HTML 时，考虑到从客户端减少必要的代码以上是关于带有 Ajax 的 PHP 数组 - 获取数据的正确方法？的主要内容，如果未能解决你的问题，请参考以下文章