如何通过Ajax从PHP文件中获取JSON数据？
如何通过Ajax从PHP文件中获取JSON数据？
提问于 2018-06-21 04:26:40
我想用MySQL数据生成一个网络图。
我有一个MySQL数据表。每一行都有一个按钮。如果我点击其中一个按钮，引导程序模式将随之出现nodes。
我的问题是，如果我点击其中一个按钮，引导程序模式会显示所有nodes而不是edges。我怎样才能在ajax调用edges？我正在尝试$.getJSON，但它不起作用。
这是我的实际输出，如果我点击其中一个按钮：
在这里输入图像描述
例
function drawNetwork() {
var nodes = [{
id: 1,
label: 'data1',
shape: 'box'
},
{
id: 2,
label: 'data2',
shape: 'box'
},
{
id: 3,
label: 'data3',
shape: 'box'
},
{
id: 4,
label: 'data4',
shape: 'box'
}
];
var edges = [{
from: 1,
to: 2,
label: 'Description1',
arrows: {
to: true
}
},
{
from: 1,
to: 3,
label: 'Description2',
font: {
align: 'top'
},
arrows: {
to: true
}
},
{
from: 1,
to: 4,
label: 'Description3',
font: {
align: 'top'
},
arrows: {
to: true
}
}
];
var container = document.getElementById('network-container');
var data = {
nodes: nodes,
edges: edges
};
var width = 600;
var height = 500;
var options = {
width: width + 'px',
height: height + 'px',
edges: {
smooth: false
},
physics: false,
interaction: {
hover: true,
dragNodes: true, // allow dragging nodes
zoomView: false, // do not allow zooming
dragView: false // do not allow dragging
}
};
var network = new vis.Network(container, data, options);
}
$('#model4temp').on('shown.bs.modal', function() {
drawNetwork();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Connect to</th>
<th>View</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2, Data3, Data4</td>
<td><input type="button" data-toggle="modal" data-target='#model4temp' value="View" class="btn btn-success btn-md"></td>
</tr>
<tr>
<td>Data2</td>
<td>Data3, Data4</td>
<td></td>
</tr>
<tr>
<td>Data3</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Data4</td>
<td>Data5</td>
<td></td>
</tr>
<tr>
<td>Data5</td>
<td>Data6</td>
<td></td>
</tr>
<tr>
<td>Data6</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="model4temp" tabindex="-1" role="dialog" aria-labelledby="basicModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Sample Network in modal</h4>
</div>
<div class="modal-body">
<div id="network-container" style="height:500px;width:600px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
使用Javascript
$(document).ready(function(){
$('.view_data').click(function(){
var data_id = $(this).attr("id");
$.ajax({
url:"edges.php",
method:"post",
data:{data_id:data_id},
success:function(data){
$('#moreInfo').html(data);
$('#dataModal').modal("show");
}
});
$.ajax({
type:"GET",
cache: false,
dataType: "json",
url: "nodes.php",
success: function(data){
var nodeDatas = new vis.DataSet();
var edgeDatas = new vis.DataSet();
var myDiv = document.getElementById("network-container");
data={
nodes: nodeDatas,
edges: edgeDatas
};
var options = {};
var network = new vis.Network(myDiv, data, options);
$.getJSON('edges.php', function(edges){
edgeDatas.add(edges);
});
$.getJSON('nodes.php', function(nodes){
nodeDatas.add(nodes);
});
}
});
});
});
edges.php
$id = $_POST["data_id"];
if ($conn){
if(isset($id)) {
$sql=$conn->prepare("SELECT table1.table1_id AS id1, table2.table2_id AS id2,
table1_table2.connection AS conn
FROM table1
LEFT JOIN table1_table2 ON table1.table1_id = table1_table2.table1_id
LEFT JOIN table2 ON table2.table2_id = table1_table2.table2_id
WHERE table1.table1_id=?
");
$sql -> bind_param('i', $id);
$sql -> execute();
$result = $sql -> get_result();
$sql -> close();
while($row= mysqli_fetch_assoc($result)) {
$id1 = $row['id1'];
$id2 = $row['id2'];
$conn = $row['conn'];
$arr[] = array("from" => $id1,
"to" => $id2,
"title" => $conn);
}
}
echo json_encode($arr);
}
回答 1
Stack Overflow用户
发布于 2018-06-21 14:07:49
我无法测试它，但这应该是调用和分配的工作顺序
$(document).ready(function(){
$('.view_data').click(function(){
var data_id = $(this).attr("id");
$.ajax({
url:"edges.php",
method:"post",
data:{data_id:data_id},
success:function(data){
$('#moreInfo').html(data);
$('#dataModal').modal("show");
// already set edgesData here:
var edgesData = data;
// make the second ajax in here:
$.ajax({
type:"GET",
cache: false,
dataType: "json",
url: "nodes.php",
success: function(nodesDatas){
var myDiv = document.getElementById("network-container");
data={
nodes: nodesDatas,
edges: edgeDatas
};
var options = {};
var network = new vis.Network(myDiv, data, options);
// no need for the additional getJson calls
}
});
}
});
});
});
这不是最优雅的方式。更漂亮（但更难理解）是使用返回的promise并等待所有人解决，然后将值分配给vis.Network。
另外：你确定，nodes.php不需要参数（id）？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100005471
复制相关文章
相似问题