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

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

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

我想用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)?

扫码关注云+社区

领取腾讯云代金券