Question

我在表格中有一些MySQL数据。此表显示数据如何相互连接。我还有每个数据的按钮。我想想象这些关系。我正在使用vis.js进行可视化。我是Javascript的新手，我不知道如何将MySQL数据传递给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>

{{1}}

Answer 1

如果要在此变量中获取mysql数据＆＃34; network＆＃34;然后就这样做。

$('#model4temp').on('shown.bs.modal', function() {
  drawNetwork(network);
});

并像这样定义你的功能

function drawNetwork(network) {
  // Your stuff here
}

Answer 2

要获取数据，您需要向服务器（提供数据的计算机）发出请求。

你是怎么做到的？

浏览器：在地址栏中输入资源地址。当您请求网页时，服务器会向您发送数据。（后者呈现的HTML原始文本构成此网页）

<强> JavaScript的：

要以编程方式执行此操作，您需要一组协议。

案例1： 客户端（浏览器）如何请求数据？

案例2： 服务器如何响应请求？

案例1：使用JavaScript请求数据。

在JavaScript中，您可以使用以下代码来请求数据。

xhttp.open("GET", "https://reqres.in/api/users?page=2", true);
xhttp.send();

网址 https://reqres.in/api/users?page=2 响应数据，来自服务器的MYSQL数据。

但怎么可能？

好吧，每个服务器都有自己的后端机制。让我们使用php来响应服务器请求（GET请求）

案例2：用PHP回复案例1请求。

$result = Array( 'Categories' => Array(), 'Products' => Array());

$stmt = $mysqli->prepare( 'SELECT id, parent_id, name FROM category' );
$stmt->bind_result( $id, $parent_id, $name );
$stmt->execute();
while( $stmt->fetch() ) {
  $result['Categories'][] = Array( 'id' => $id, 'parent_id' => $parent_id, 'name' => $name );
} 
$stmt->close();
//Do the same for the other one

$jsonstring = json_encode( $result );

$ jsonstring变量包含您需要的数据，您可以回显它来响应任何请求。

但JavaScript如何处理来自服务器的响应，以便您在浏览器中使用它？

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
  //use data here.(here we just print the data on the screen)
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "https://reqres.in/api/users?page=2", true);
xhttp.send();

我希望这会有所帮助，你可以轻松地使用jquery

$.get("https://reqres.in/api/users?page=2", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });

您需要研究的内容： AJAX Calls in JavaScript， working with databases with PHP（或任何其他语言）

这只是一个基本的介绍，你需要使用这篇文章中的关键词来研究你应该知道什么。

将MySQL数据传递给Javascript

实施例

2 个答案: