• Live2D 看板娘


    使用PHP从MySQL中获取数据:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
    table, th , td  {
      border: 1px solid grey;
      border-collapse: collapse;
      padding: 5px;
    }
    table tr:nth-child(odd) {
      background-color: #f1f1f1;
    }
    table tr:nth-child(even) {
      background-color: #ffffff;
    }
    </style>
    </head>
    <body>
    
    <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("/try/angularjs/data/Customers_MySQL.php")
       .success(function (response) {$scope.names = response.records;});
    });
    </script>
    
    </body>
    </html>
    

    ASP.NET中执行SQL获取数据:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
    table, th , td  {
      border: 1px solid grey;
      border-collapse: collapse;
      padding: 5px;
    }
    table tr:nth-child(odd) {
      background-color: #f1f1f1;
    }
    table tr:nth-child(even) {
      background-color: #ffffff;
    }
    </style>
    </head>
    <body>
    
    <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.runoob.com/try/angularjs/data/Customers_SQL.aspx")
       .success(function (response) {$scope.names = response.records;});
    });
    </script>
    
    </body>
    </html>
    

    服务端代码:

    以下列出了列出了几种服务端代码类型:

    1. 使用 PHP 和 MySQL。返回 JSON。
    2. 使用 PHP 和 MS Access。返回 JSON。
    3. 使用 ASP.NET, VB, 及 MS Access。 返回 JSON。
    4. 使用 ASP.NET, Razor, 及 SQL Lite。 返回 JSON。

    跨域HTTP请求:

    如果你需要从不同的服务器(不同域名)上获取数据就需要使用跨域 HTTP 请求。

    跨域请求在网页上非常常见。很多网页从不同服务器上载入 CSS, 图片,Js脚本等。

    在现代浏览器中,为了数据的安全,所有请求被严格限制在同一域名下,如果需要调用不同站点的数据,需要通过跨域来解决。

    以下的 PHP 代码运行使用的网站进行跨域访问。

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

    更多跨域访问解决方案可参阅:PHP Ajax 跨域问题最佳解决方案(http://www.runoob.com/w3cnote/php-ajax-cross-border.html)

    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,VB Razor和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 
    
  • 相关阅读:
    2017年软件工程基础-个人项目作业
    [2017BUAA软工]第1次个人作业
    [2017BUAA软工]第0次个人作业
    个人作业——软件工程实践总结&个人技术博客
    个人作业——软件评测
    结对第二次作业
    软件工程结对作业
    寒假作业(2/2)
    软件工程寒假快乐作业
    技术总结——Vue页面刷新的方法
  • 原文地址:https://www.cnblogs.com/jiangtengteng/p/5986086.html
Copyright © 2020-2023  润新知