ล่าสุดการพัฒนาเว็บบทเรียน
 

AngularJS SQL

❮ก่อนหน้า ถัดไปบท❯

AngularJS เป็นที่สมบูรณ์แบบสำหรับการแสดงข้อมูลจากฐานข้อมูล เพียงให้แน่ใจว่าข้อมูลอยู่ในรูปแบบ JSON

กำลังเรียกข้อมูลจาก MySQL PHP เซิร์ฟเวอร์ที่ใช้

ตัวอย่าง 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("http://www.w3ii.com/angular/customers_mysql.php")
    .then(function (response) {$scope.names = response.data.records;});
});
</script>
ลองตัวเอง»

กำลังเรียกข้อมูลจากใช้ SQL เซิร์ฟเวอร์ ASP.NET

ตัวอย่าง 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("http://www.w3ii.com/angular/customers_sql.aspx")
    .then(function (response) {$scope.names = response.data.records;});
});
</script>
ลองตัวเอง»

ตัวอย่างเซิร์ฟเวอร์รหัส

ส่วนต่อไปนี้เป็นรายชื่อของรหัสเซิร์ฟเวอร์ที่ใช้ในการดึงข้อมูล SQL

  1. โดยใช้ PHP และ MySQL กลับ JSON
  2. โดยใช้ PHP และ MS Access กลับ JSON
  3. ใช้ ASP.NET, VB และ MS Access กลับ JSON
  4. ใช้ ASP.NET, มีดโกนและ SQL Lite กลับ JSON

ร้องขอ HTTP ข้ามไซต์

การร้องขอข้อมูลจากเซิร์ฟเวอร์ที่แตกต่างกัน (กว่าหน้าขอ) จะถูกเรียกว่าข้ามไซต์ร้องขอ HTTP

ร้องขอ cross-site อยู่ทั่วไปบนเว็บ หลายหน้าโหลด CSS, ภาพ, และสคริปต์จากเซิร์ฟเวอร์ที่แตกต่างกัน

ในเบราว์เซอร์ที่ทันสมัยข้ามไซต์ร้องขอ HTTP จากสคริปต์ถูก จำกัด ไปยังเว็บไซต์เดียวกันสำหรับเหตุผลด้านความปลอดภัย

บรรทัดต่อไปนี้ในตัวอย่าง PHP ของเราได้รับการเพิ่มเพื่อให้สามารถเข้าถึงข้ามไซต์

header("Access-Control-Allow-Origin: *");

1. เซิร์ฟเวอร์รหัส PHP และ 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. เซิร์ฟเวอร์รหัส PHP และ 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. เซิร์ฟเวอร์รหัส ASP.NET, VB และ 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. เซิร์ฟเวอร์รหัส ASP.NET, C # มีดโกนและ 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 <> "" then 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

❮ก่อนหน้า ถัดไปบท❯