我已经寻找解决方案近三天了，但我无法弄清楚。这是我的问题:
我的文件名为:index.php
<html>
<head>
<title>AngularJS-FlowChart</title>
<!--
LiveReload support.
http://livereload.com/
-->
<script src="http://localhost:35729/livereload.js?snipver=1"></script>
</head>
<body
ng-app="app"
ng-controller="AppCtrl"
mouse-capture
ng-keydown="keyDown($event)"
ng-keyup="keyUp($event)"
>
<div style="width: 100%; overflow: hidden;">
<!--<div style="width: 600px; float: left;">
<textarea
style="width: 100%; height: 100%;"
chart-json-edit
view-model="chartViewModel"
>
</textarea>
</div>-->
<div style="margin-left: 0px;">
<button
ng-click="addNewNode()"
title="Add a new node to the chart"
>
Add Node
</button>
<button
ng-click="addNewInputConnector()"
ng-disabled="chartViewModel.getSelectedNodes().length == 0"
title="Add a new input connector to the selected node"
>
Add Input Connector
</button>
<button
ng-click="addNewOutputConnector()"
ng-disabled="chartViewModel.getSelectedNodes().length == 0"
title="Add a new output connector to the selected node"
>
Add Output Connector
</button>
<button
ng-click="deleteSelected()"
ng-disabled="chartViewModel.getSelectedNodes().length == 0 && chartViewModel.getSelectedConnections().length == 0"
title="Delete selected nodes and connections"
>
Delete Selected
</button>
<!--
This custom element defines the flowchart.
-->
<flow-chart
style="margin: 5px; width: 40%; height: 70%; float: right"
chart="chartViewModel"
>
</flow-chart>
<flow-chart
style="margin: 5px; width: 40%; height: 70%; float: left"
chart="chartViewModel"
>
</flow-chart>
</div>
</div>
<link rel="stylesheet" type="text/css" href="app.css">
<!-- Library code. -->
<script src="lib/jquery-2.0.2.js" type="text/javascript"></script>
<script src="lib/angular.js" type="text/javascript"></script>
<!-- Flowchart code. -->
<script src="debug.js" type="text/javascript"></script>
<script src="flowchart/svg_class.js" type="text/javascript"></script>
<script src="flowchart/mouse_capture_service.js" type="text/javascript"></script>
<script src="flowchart/dragging_service.js" type="text/javascript"></script>
<script src="flowchart/flowchart_viewmodel.js" type="text/javascript"></script>
<script src="flowchart/flowchart_directive.js" type="text/javascript"></script>
<!-- App code. -->
<script src="app.js" type="text/javascript"></script>
</body>
</html>
我还有另一个文件，名为:app.js
//
// Define the 'app' module.
//
angular.module('app', ['flowChart', ])
//
// Simple service to create a prompt.
//
.factory('prompt', function () {
/* Uncomment the following to test that the prompt service is working as expected.
return function () {
return "Test!";
}
*/
// Return the browsers prompt function.
return prompt;
})
//
// Application controller.
//
.controller('AppCtrl', ['$scope', 'prompt', function AppCtrl ($scope, prompt) {
//
// Code for the delete key.
//
var deleteKeyCode = 46;
//
// Code for control key.
//
var ctrlKeyCode = 65;
//
// Set to true when the ctrl key is down.
//
var ctrlDown = false;
//
// Code for A key.
//
var aKeyCode = 17;
//
// Code for esc key.
//
var escKeyCode = 27;
//
// Selects the next node id.
//
var nextNodeID = 10;
//
// Setup the data-model for the chart.
//
var chartDataModel = {};
//
// Event handler for key-down on the flowchart.
//
$scope.keyDown = function (evt) {
if (evt.keyCode === ctrlKeyCode) {
ctrlDown = true;
evt.stopPropagation();
evt.preventDefault();
}
};
//
// Event handler for key-up on the flowchart.
//
$scope.keyUp = function (evt) {
if (evt.keyCode === deleteKeyCode) {
//
// Delete key.
//
$scope.chartViewModel.deleteSelected();
}
if (evt.keyCode == aKeyCode && ctrlDown) {
//
// Ctrl + A
//
$scope.chartViewModel.selectAll();
}
if (evt.keyCode == escKeyCode) {
// Escape.
$scope.chartViewModel.deselectAll();
}
if (evt.keyCode === ctrlKeyCode) {
ctrlDown = false;
evt.stopPropagation();
evt.preventDefault();
}
};
//
// Add a new node to the chart.
//
$scope.addNewNode = function () {
var nodeName = prompt("Enter new node!", "New node");
if (!nodeName) {
return;
}
//
// Template for a new node.
//
var newNodeDataModel = {
name: nodeName,
id: nextNodeID++,
x: 50,
y: 50
};
$scope.chartViewModel.addNode(newNodeDataModel);
};
//
// Add an input connector to selected nodes.
//
$scope.addNewInputConnector = function () {
var connectorName = prompt("Enter a connector name:");
if (confirm(connectorName)) {
var selectedNodes = $scope.chartViewModel.getSelectedNodes();
for (var i = 0; i < selectedNodes.length; ++i) {
var node = selectedNodes[i];
node.addInputConnector({
name: connectorName
});
}
} else return;
};
//
// Add an output connector to selected nodes.
//
$scope.addNewOutputConnector = function () {
var connectorName = prompt("Enter a connector name:");
if (confirm(connectorName)) {
var selectedNodes = $scope.chartViewModel.getSelectedNodes();
for (var i = 0; i < selectedNodes.length; ++i) {
var node = selectedNodes[i];
node.addOutputConnector({
name: connectorName,
});
}
} else return;
};
//
// Delete selected nodes and connections.
//
$scope.deleteSelected = function () {
$scope.chartViewModel.deleteSelected();
};
//
// Create the view-model for the chart and attach to the scope.
//
$scope.chartViewModel = new flowchart.ChartViewModel(chartDataModel);
}])
;
我想要实现的是从 MySQL 读取数据并在 app.js 文件中使用相同的数据。我真的需要任何帮助。 我在前 5 个谷歌页面上阅读了所有关于这个主题的文章，但没有成功。我尝试了各种“教程”，但我能找到解决方案。
最佳答案
使用 jQuery 的 AJAX 函数将数据发送到 PHP 服务:
$.ajax({
type: 'POST',
url: path + '/php/yourService.php',
data: 'var=' + var,
success: function (response) {
// Do smth with the response
}
});
在您的 PHP 服务中读取数据库的数据:
// connect to your database first
$username = $_POST["var"];
$sql="SELECT * FROM users WHERE anything = '$var'";
$result = mysql_query($sql);
if($result === FALSE) {
die(mysql_error());
}
while($row = mysql_fetch_array($result)){
return $row["variable"];
}
应该可以解决问题。有 Angular 与否并不重要。返回的数据可以通过 ajax onSuccess 函数中的响应变量访问。希望这有帮助
关于javascript - 从 .js 文件内的 MySQL 获取数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24822208/