Javascript 单击时通过JQuery传递给PHP脚本的表值
我在数据表中有一个链接,可以打开引导模式。在模态中,我有一个morris.js图。我不知道如何根据用户单击的链接过滤数据集 如何读入单击位置的值,例如本例中的Cluster1或Cluster2。将该变量传递给数据拉取脚本,例如cluster_pulse.php,然后传递到该脚本中的SQL查询中 谢谢 桌子的剪子:Javascript 单击时通过JQuery传递给PHP脚本的表值,javascript,php,jquery,ajax,morris.js,Javascript,Php,Jquery,Ajax,Morris.js,我在数据表中有一个链接,可以打开引导模式。在模态中,我有一个morris.js图。我不知道如何根据用户单击的链接过滤数据集 如何读入单击位置的值,例如本例中的Cluster1或Cluster2。将该变量传递给数据拉取脚本,例如cluster_pulse.php,然后传递到该脚本中的SQL查询中 谢谢 桌子的剪子: <tr class="odd"> <td class="sorting_1"> <a href="#" data-toggle="modal" data-
<tr class="odd">
<td class="sorting_1">
<a href="#" data-toggle="modal" data-target="#clusterpulse">Cluster1</a></td>...
<a href="#" data-toggle="modal" data-target="#clusterpulse">Cluster2</a></td>...
模式:
<div class="modal fade" id="clusterpulse" tabindex="-1" role="dialog"
aria-labelledby="clusterpulse" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Cluster Pulse</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-long-arrow-right"></i>Cluster Pulse</h3>
</div>
<div class="panel-body">
<div id="morris-chart-cluster-pulse"></div>
</div>
</div>
</div>
</div>
</div>
</div>
js:
<script>
$('#clusterpulse').on('shown.bs.modal', function () {
$(function () {
$( "#morris-chart-cluster-pulse" ).empty();
// Create a Bar Chart with Morris
var chart = Morris.Line({
element: 'morris-chart-cluster-pulse',
d: [
{ d: '0', VSI: 0 }
],
xkey: 'd',
ykeys: ['test'],
labels: ['test'],
gridIntegers: true,
ymax: '1',
ymin: '0',
xLabelFormat: function(d) { return (d.getMonth()+1)+'/'+d.getDate();},
xLabels: "week"
});
// Fire off an AJAX request to load the data
$.ajax({
type: "GET",
dataType: 'json',
url: "../scripts/cluster_pulse.php", // This is the URL to the API
})
.done(function (data) {
// When the response to the AJAX request comes back render the chart with new data
chart.setData(data);
})
.fail(function () {
// If there is no communication between the server, show an error
alert("error occured");
});
});
});
数据拉脚本:
<?php
include("connect.php");
if( $conn === false ) {
echo "Could not connect.\n";
die( print_r( sqlsrv_errors(), true));
}
/* Set up and execute the query. */
$sql = "SELECT d,test FROM <database> WHERE CLUSTER_NAME = '%$value%'
";
$stmt = sqlsrv_query( $conn, $sql);
do {
while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
$json[] = $row;
}
} while ( sqlsrv_next_result($stmt) );
foreach($json as &$each) {
// reassign "d" key to just the date (formatted), discard the rest
$each['d'] = date('Y-m-d', strtotime($each['d']));
}
echo json_encode($json);
?>
以下示例的HTML我不知道您的表是否存在问题:
<a href='#' data-toggle='modal' data-target='#clusterpulse' id='cluster_number_1'>Cluster1</a>
<a href="#" data-toggle='modal' data-target='#clusterpulse' id='cluster_number_2'>Cluster2</a>
您可以在../scripts/cluster_pulse.php获得AJAX,如下所示:
现在从内部
.done(function(results){
/* result are now JSON with properties like:
{
'cluster1':'Cluster1',
'extra_data':'some other data here 1';
}
or
{
'cluster2':'Cluster1',
'extra_data':'some other data here 2';
}
Note:
There is probably no need to send results already available in JavaScript to the
Server only to get them back to pass the results into your `.done()` method's
function argument
$('#outputId1').html(results.cluster1);
*/
});
我最后做的是向表对象添加一个ID,并使用集群名称:
...
<td class="sorting_1">
<a href="#" data-toggle="modal" data-target="#clusterpulse" id="cluster1">cluster1</a></td>
...
然后在get中,我将ID传递给API:
$.ajax({
type: "GET",
dataType: 'json',
url: "../scripts/cluster_pulse.php?val="+id, // This is the URL to the API
然后在php中,我抓取变量并将其传递到查询中:
$rec = $_REQUEST['val'];
...
$sql = "SELECT d,test FROM <database> WHERE CLUSTER_NAME = ('".$rec."')";
它似乎工作得很好。感谢所有帮助。您可以在函数中获取处理单击事件的参数,然后获取所需的属性。F.E.:$'clusterpulse'。在'Showed.bs.modal'上,函数E{then var anchorText=$E.target.text;是否有任何方法使其更具动态性?我可能会在表中随机设置一些群集,因此我不想静态分配。谢谢。
$("table").delegate("a", "click", function() {
id=$(this).attr('id');
});
$.ajax({
type: "GET",
dataType: 'json',
url: "../scripts/cluster_pulse.php?val="+id, // This is the URL to the API
$rec = $_REQUEST['val'];
...
$sql = "SELECT d,test FROM <database> WHERE CLUSTER_NAME = ('".$rec."')";