在另一篇文章中，我获得了一些关于使用 AJAX 动态创建下拉菜单的帮助。
我有一个表，它显示（在 HTML 表中）mySQL 表中包含的所有信息 - 上面有 3 个与表的特定行相关的下拉列表。现在，我正在尝试使用从下拉列表中选择的数据来“刷新”表格（即，如果用户选择下拉列表 - 表格会刷新显示由他们的选择过滤的数据）。
我的 client.php 看起来像这样（这是用户加载的内容）：
<script id="source" language="javascript" type="text/javascript">
$(function ()
{
//-----------------------------------------------------------------------
//SEND HTTP REQUEST WITH AJAX INITIALLY
//-----------------------------------------------------------------------
$.ajax({
url: 'api.php', //the script to call to get data
data: "", //insert url argumnets here to pass to api.php for example "id=5&parent=6"
dataType: 'json', //data format
success: function(response) //on recieve of reply
{ //Do the following on Success
//Set the filtering for "Creative"
var creatives = response.CREATIVE;
for (var i in creatives)
{
var creative = creatives[i];
var creativeID = creative[0];
$('#creative-select').append("<option value=\""+creativeID+"\">"+creativeID+"</option>");
}
//Set the filtering for "Stations"
var stations = response.STATION_NETWORK;
for (var i in stations)
{
var station = stations[i];
var stationID = station[0];
$('#station-select').append("<option value=\""+stationID+"\">"+stationID+"</option>");
}
//Set the filtering for "Verticals"
var verticals = response.VERTICAL;
for (var i in verticals)
{
var vertical = verticals[i];
var vertID = vertical[0];
$('#vertical-select').append("<option value=\""+vertID+"\">"+vertID+"</option>");
}
//Set the Table Content Initially
var rows = response.rowdata;
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];
//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>");
}
} // End of 'for' loop for the table data
} //End of 'do this on success'
}); //End of AJAX call
}); //End of Function
function showCreative (creativeVal)
{
//-----------------------------------------------------------------------
//Send the Creative filter criteria
//-----------------------------------------------------------------------
$.ajax({
url: 'api.php', //the script to call to get data
data: "creative="+creativeVal, //insert url argumnets here to pass to api.php for example "id=5&parent=6"
dataType: 'json', //data format
success: function(response) //on recieve of reply
{ //Do the following on Success
alert ("this never fires!");
} //end of on success
}); //End Ajax call
}; //End Creative Function
</script>
</head>
<body>
<h2> Media Call Reports </h2>
<h3>Media Analysis: </h3>
<div id="instruction">Select how you would like the data selected using the dropdowns below</div>
<!--DROPDOWNS-->
<div id="dropdowns">
<div id="creativesel">
Creative -
<select name="creative-select" id="creative-select" onChange ="showCreative(this.value);">
<option value="all">All</option>
</select>
</div>
<div id="stationsel">
Station -
<select name="station-select" id="station-select" onChange ="showStation(this.value)">
<option value="all">All</option>
</select>
</div>
<div id="verticalsel">
Vertical -
<select name="vertical-select" id="vertical-select" onChange ="showVertical(this.value)">
<option value="all">All</option>
</select>
</div>
</div> <!--Dropdowns ending-->
<!--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>
</table>
</body>
</html>
我目前在 api.php 中的内容如下所示：
<?php
//--------------------------------------------------------------------------
// Connect to DB
//--------------------------------------------------------------------------
include 'DB.php';
$con = mysql_connect($host,$user,$pass) ;
$dbs = mysql_select_db($databaseName, $con);
//--------------------------------------------------------------------------
// Initial Page Load - get data from DB
//--------------------------------------------------------------------------
//Dropdown Filter Function
function dropdownFilter($filterColumn)
{
global $finalarray;
$filterSQL = "SELECT $filterColumn FROM media_analysis GROUP BY $filterColumn";
$filterResult = mysql_query($filterSQL);
$filterColumnData = array();
while ($filterRow = mysql_fetch_row($filterResult))
{
$filterColumnData[] = $filterRow;
}
$finalarray[$filterColumn] = $filterColumnData;
}
//Dropdown for Stations
dropdownFilter("STATION_NETWORK");
//Dropdown for Verticals
dropdownFilter("VERTICAL");
//Dropdown for Creative
dropdownFilter("CREATIVE");
//Rows of table-data in media-analysis
$result = mysql_query("SELECT * FROM $tableName"); //Initial Query
$data = array();
while ($row = mysql_fetch_row($result) )
{
$data[] = $row;
}
$finalarray['rowdata'] = $data;
//----------------------------------------------
//AFTER USER SELECTS FILTERS - IF ANY SELECTED
//----------------------------------------------
//Get variables from subsequent calls in URL if any
if (isset($_GET['creative']) and !empty($_GET['creative']))
{
$creativeFilter = $_GET['creative'];
echo $creativeFilter;
$result = mysql_query("SELECT * FROM $tableName WHERE CREATIVE = '$creativeFilter'");
$data = array();
while ($row = mysql_fetch_row($result) )
{
$data[] = $row;
}
$finalarray['rowdata'] = $data;
}
//--------------------------------------------------------------------------
// 3) echo result as json
//--------------------------------------------------------------------------
echo json_encode($finalarray);
?>
初始加载工作正常 - 表已创建，下拉选择也是如此。现在我只是想让“创意”下拉菜单起作用（因此我专注于那个）。
当用户从创意下拉列表中选择某些内容时 - 我看到了对 api.php 的 AJAX 调用并带有适当的添加 (api.php?creative="whatever_user_selected") 并且响应返回时包含数组中的所有正确数据（我可以在控制台中看到它） - 但表格永远不会更新。
我需要将代码放在哪里来更新该表？获得更新的最佳方法是什么？
我是这方面的菜鸟，周围有很多教程——每个教程都指定了不同的事情要做——所以我一直在这里寻找但找不到类似的东西。
感谢所有帮助！