如何通过Ajax从PHP文件中获取JSON数据?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (392)

我想用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">&times;</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);
}
提问于
用户回答回答于

我无法测试它,但这应该是调用和分配的工作顺序

$(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)?

热门问答

我刚申请的服务器,缺省给我的是linux,可我要Windows,怎么办?

蒋小爱

腾讯云 · 技术支持 (已认证)

推荐
云服务器提供 不同平台重装:仅支持中国大陆地区(不含中国香港)。 例如,Linux 重装为 Windows,Windows 重装为 Linux 。 参考 重装系统: https://cloud.tencent.com/document/product/213/4933 图片.p...... 展开详请

在小程序开通直播功能,是不是还需要业务去申请直播的证书?

推荐
腾讯云有商业直播方案(提供小程序直播插件),客户通过直播插件实现直播业务(不需额外提供直播资质) 插件对接条件: 客户小程序类目为“电商平台”或“在线教育” 所以就是说, 只要用了腾讯云的小程序直播方案, 小程序的类目为 “电商平台” 或“ 在线教育”, 就可以。只要自身业务不...... 展开详请

腾讯云 TRTC 互动直播 云直播 商业直播区别是什么?

人生的旅途辣鸡前端
推荐
云直播:腾讯云的直播云端处理分发平台 移动直播:腾讯云提供的直播推拉流集成的sdk(iOS、Android、小程序) 互动直播:云直播(云端)+移动直播(终端)+连麦功能 商业直播:基于云直播的直播小程序插件(SaaS腾讯云提供页面模板,PaaS客户自己开发) 商业直播和移动直播...... 展开详请

关于ti-one平台问题?

腾讯智能钛AI开发者

腾讯云 · 智能钛产品团队 (已认证)

腾讯智能钛产品团队官方运营账号。分享产品最新动态,第一时间解答用户疑问。
推荐
您好,感谢您的提问。 TI-ONE平台里的任务是运行在Linux系统上的; 目前TI-ONE工作流任务暂不支持实时查看显存使用情况,notebook任务可在右侧资源栏查看; TI-ONE已上线计费,但目前试运营阶段限时0折。试运营阶段结束,正式开启收费前会提前通知用户定价变动,还...... 展开详请

合作伙伴学院里的学习视频测试题和在线培训系统里的测试题能否提供答案?

骑牛看晨曦love&peace~
推荐

http://tencentcloudxuexi.com 合作伙伴可以登录此平台做练习题,有答案的喔

云服务器不能访问外部网站?

HappyLau谈云计算

腾讯云 · 云计算高级工程师 (已认证)

专注于公有云,私有云解决方案,在kubernetes,openstack,kvm,ceph,linux,shell有丰富的实战经验。
推荐
不能访问外部网站一般是网络和dns的问题,按照如下步骤排查: 1. 确保CVM有外网ip或者NAT转换,使用ping测试下外网的连通性,如果不通请购买弹性公网IP,先申请后购买参考https://cloud.tencent.com/document/product/215/201...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券