AngularJS tut 14: Kết nối SQL
AngularJS hoàn hảo để hiển thị dữ liệu từ Cơ sở dữ liệu. Chỉ cần đảm bảo dữ liệu ở định dạng JSON.
Tìm nạp dữ liệu từ máy chủ PHP đang chạy MySQL
Ví dụ về AngularJS
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers_mysql.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
Tìm nạp dữ liệu từ máy chủ ASP.NET đang chạy SQL
Ví dụ về AngularJS
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers_sql.aspx")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
Ví dụ về mã máy chủ
Phần sau là danh sách mã máy chủ được sử dụng để tìm nạp dữ liệu SQL.
- Sử dụng PHP và MySQL. Đang trả lại JSON.
- Sử dụng PHP và MS Access. Đang trả lại JSON.
- Sử dụng ASP.NET, VB và MS Access. Đang trả lại JSON.
- Sử dụng ASP.NET, Razor và SQL Lite. Đang trả lại JSON.
Yêu cầu HTTP trên nhiều trang web
Yêu cầu dữ liệu từ một máy chủ khác (không phải trang yêu cầu), được gọi là yêu cầu HTTP giữa các trang web .
Yêu cầu trên nhiều trang là phổ biến trên web. Nhiều trang tải CSS, hình ảnh và tập lệnh từ các máy chủ khác nhau.
Trong các trình duyệt hiện đại, các yêu cầu HTTP trên nhiều trang web từ các tập lệnh bị hạn chế đối với cùng một trang web vì lý do bảo mật.
Dòng sau, trong các ví dụ PHP của chúng tôi, đã được thêm vào để cho phép truy cập trang web chéo.
header("Access-Control-Allow-Origin: *");
1. Mã máy chủ PHP và MySQL
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");
$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "") {$outp .= ",";}
$outp .= '{"Name":"' . $rs["CompanyName"] . '",';
$outp .= '"City":"' . $rs["City"] . '",';
$outp .= '"Country":"'. $rs["Country"] . '"}';
}
$outp ='{"records":['.$outp.']}';
$conn->close();
echo($outp);
?>
2. Mã máy chủ PHP và MS Access
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=ISO-8859-1");
$conn = new COM("ADODB.Connection");
$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwind.mdb");
$rs = $conn->execute("SELECT CompanyName, City, Country FROM Customers");
$outp = "";
while (!$rs->EOF) {
if ($outp != "") {$outp .= ",";}
$outp .= '{"Name":"' . $rs["CompanyName"] . '",';
$outp .= '"City":"' . $rs["City"] . '",';
$outp .= '"Country":"'. $rs["Country"] . '"}';
$rs->MoveNext();
}
$outp ='{"records":['.$outp.']}';
$conn->close();
echo ($outp);
?>
3. Mã máy chủ ASP.NET, VB và MS Access
<%@ Import Namespace="System.IO"%>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.Data.OleDb"%>
<%
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
Dim conn As OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
Dim outp
Dim c
conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=Northwind.mdb")
objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn)
objAdapter.Fill(objDataSet, "myTable")
objTable=objDataSet.Tables("myTable")
outp = ""
c = chr(34)
for each x in objTable.Rows
if outp <> "" then outp = outp & ","
outp = outp & "{" & c & "Name" & c & ":" & c & x("CompanyName") & c & ","
outp = outp & c & "City" & c & ":" & c & x("City") & c & ","
outp = outp & c & "Country" & c & ":" & c & x("Country") & c & "}"
next
outp ="{" & c & "records" & c & ":[" & outp & "]}"
response.write(outp)
conn.close
%>
4. Mã máy chủ ASP.NET, Razor C # và SQL Lite
@{
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
var db = Database.Open("Northwind");
var query = db.Query("SELECT CompanyName, City, Country FROM Customers");
var outp =""
var c = chr(34)
}
@foreach(var row in query){
if (outp != "") {outp = outp + ","}
outp = outp + "{" + c + "Name" + c + ":" + c + @row.CompanyName + c + ","
outp = outp + c + "City" + c + ":" + c + @row.City + c + ","
outp = outp + c + "Country" + c + ":" + c + @row.Country + c + "}"
}
outp ="{" + c + "records" + c + ":[" + outp + "]}"
@outp