ajax調取php,mysql後臺資料例項

阿新 • • 發佈：2019-01-20

前面總結有關angularjs調取php後臺的例項,今天分享一個使用原生ajax調取mysql資料庫資料的例項。
mysql資料庫表資料部分:

mysql資料庫表設計部分:

PHP程式碼:

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
/* 
 * + -----------------------------------------------------------
 * | 程式碼註釋：
 * + -----------------------------------------------------------
 * | header("Access-Control-Allow-Origin: *");
 * | 解決跨域的問題
 * + -----------------------------------------------------------
 * | header("Content-Type: application/json; charset=UTF-8");
 * | 這裡決定了你後臺servlet的http服務返回到前臺的資料型別。設定成json前臺返回的
 * | 資料就是以json格式傳輸的。
 * + -----------------------------------------------------------
 * | 1、$mysqli 連線資料庫
 * | 2、測試連線如果connect_errno>0則連線錯誤    
 * | 3、$sql 查詢資料庫demo中的資料表angularjsFile
 * | 4、$mysqli_result 執行查詢語句query返回陣列型別（SELECT返回的是陣列型別）
 * | 5、$outp 建立空物件，儲存$mysqli_result中的記錄
 * | 6、迴圈取出的記錄資料，第一次執行$outp如過不為空則在物件的後面加上一個“，”。
 * | 注意：第一次程式執行的時候$outp肯定是空的，當第一次程式執行完畢後$outp就不會在為空，
 * | 這時候$outp中就有了一條記錄。
 * + -----------------------------------------------------------
 * | php中的“.”是字串連線的意思。
 * + -----------------------------------------------------------
 * | $outp = '{"records":['.$outp.']}';生成json格式的物件。
 * + -----------------------------------------------------------
 * | $mysqli->close();關閉資料庫連線
 * + -----------------------------------------------------------
 * | echo($outp); 打印出資料。
 * + -----------------------------------------------------------
 * | 後臺返回的json其實是一個物件，裡面包含的是鍵值對，在鍵的名稱自己定義，值為陣列，
 * | 在陣列中又包含的是物件。
 * | 注意一定要很瞭解josn的資料格式，陣列中包含的物件其實就是從資料庫中讀取的值。
 * + -----------------------------------------------------------
 */
// 連線資料庫
$mysqli = new mysqli("localhost","使用者名稱t","密碼","demo");
// 判斷連線是否成功
if ($mysqli->connect_error>0){
    echo "連線失敗";
}
// 如果資料庫連線成功則進行SQL語句的查詢語句SELECT,查詢angularfile
$sql = "SELECT * FROM angularfile";
$mysqli_result = $mysqli->query($sql);

// 建立backResult空物件
$backResult = "";
// 執行while迴圈語句,迴圈資料庫查詢的結果集,並使用fetch_array()取出每條記錄.
while ($row = $mysqli_result->fetch_array(MYSQL_ASSOC)){    
    // 判斷$backResult是否為不為空,如果不為空則在值後面加上",".
    if ($backResult != ""){
        $backResult .= ",";
    };    
    // 使用字串拼接的方式為$$backResult變數建立物件,著個物件中儲存的是資料庫angularfile表中的每條記錄.
    $backResult .= '{"Name":"' . $row["Name"] . '",';
    $backResult .= '"City":"' . $row["City"] . '",';
    $backResult .= '"Job":"' . $row["Job"] . '"}';
}
// 拼接返回的json物件,物件中鍵的名稱為myfile,物件的值為陣列.
$backResult = '[' .$backResult .']';
// 關閉資料庫連線
$mysqli->close();
// 列印返回給前臺的json資料.
echo $backResult;
?>

HTML部分:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ajax調取例項</title>
<script src="./js/newajax.js"></script>
<style type="text/css">
#oUl{
    border:1px solid #f1f1f1;
    width:300px;
    display: none;
    list-style-type:none;
    vertical-align:0;
    padding:0;
    font-size: 14px;      
}
#oUl li{
    height: 40px;
    line-height: 40px;
    text-align: center;
}
#oUl li:nth-child(odd) {
      background-color: #f1f1f1;
    }
    table tr:nth-child(even) {
      background-color: #ffffff;
    }
</style>
</head>

<body>
<button id="btn">點選</button>
<ul id="oUl"></ul>

<script type="text/javascript">
window.onload = function(){
  function myFunc(clickBtn,getData){
    var oBtn = document.getElementById(clickBtn);
    var oUl = document.getElementById(getData);
    oBtn.onclick = function(){
      oUl.style.display = 'block';
      ajax('angularFile2.php',function(sucInfo){
        var arr = eval(sucInfo);
        //eval()方法是把一個語句內容解析成一個js可以識別的方法。 
        console.log(arr);
        
        for (var i = 0, len = arr.length; i < len; i++) {
          var oLi = document.createElement("li"); //建立一個li標籤
          oLi.innerHTML = 'Name' + arr[i].Name + '&nbsp;&nbsp;' + 'City' + arr[i].City + '&nbsp;&nbsp;' + 'Job' + arr[i].Job;
          oUl.appendChild(oLi);   //將li標籤放在ul中
        }
      },function(sucInfo){
        alert("請求失敗");
      });
    }
  }
  myFunc("btn","oUl");
}
</script>
</body>
</html>

封裝的newajax.js檔案

/*
* + -------------------------------------------------------------------------------------------
* | 函式說明：
* + -------------------------------------------------------------------------------------------
* | ajax 函式名稱，可以取任意名稱。在ajax這個函式中傳遞三個引數
* + -------------------------------------------------------------------------------------------
* | url (需要請求的url)
* + -------------------------------------------------------------------------------------------
* | funSucc (當請求成功時需要執行的DOM操作)
* + -------------------------------------------------------------------------------------------
* | funFail (當請求失敗的時候需要執行的DOM操作)
* + -------------------------------------------------------------------------------------------
* | open方法 (接收三個必填引數，1.請求方法GET/POST，2.請求頁面的url，3.是否執行非同步互動)
* + -------------------------------------------------------------------------------------------
* | send方法 (向伺服器發出請求，如果採用的是非同步方式，該方法會立即返回)
* + -------------------------------------------------------------------------------------------
* | readyState屬性 (判斷此時瀏覽器與伺服器的狀態，值為4時表示完成，即響應資料接收完成)
* + -------------------------------------------------------------------------------------------
* | status屬性 (伺服器返回的狀態，值為200表示成功)
* + -------------------------------------------------------------------------------------------
* | 如果XMLHttpRequest的狀態為4且伺服器返回的狀態碼為200的情況下則讀取伺服器返回的文字資訊
* + -------------------------------------------------------------------------------------------
* | 否則彈出錯誤提示
* + -------------------------------------------------------------------------------------------
*/
function ajax(url,funSucc,funFail){
	var xmlhttp;
	// 1.建立AJAX物件
	if (window.XMLHttpRequest) {
		// 所有現代主流瀏覽器基本都支援包括IE7+
		xmlhttp = new XMLHttpRequest();
	}else{
		// 主要相容IE5、IE6
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}

	// 2.連線伺服器
	// open(方法，url，非同步互動)
	xmlhttp.open("POST", url, true);
	
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

	// 3.傳送請求
	xmlhttp.send();

	// 4.接收返回的資料
	xmlhttp.onreadystatechange=function ()
	{
		//oAjax.readyState	//瀏覽器和伺服器，進行到哪一步了
		if(xmlhttp.readyState==4)	//讀取完成
		{
			if(xmlhttp.status==200)	//成功
			{
				funSucc(xmlhttp.responseText);
			}
			else
			{
				funFail(xmlhttp.status);
			}
		}
	};
};

執行上面程式碼結果如下圖：

注意：將檔案放在伺服器中執行,否則如果用谷歌瀏覽器執行會報跨域錯誤,上面是用原生ajax來呼叫後臺資料庫資料,我們之前寫過angularjs呼叫後臺資料angularjs $http服務--XMLHTTPRequest && SQL
其實在寫這兩個例項的時候我發現我們在寫後臺返回給前端的json資料的格式是有所不同。
使用angularjs調取時：angularjs中$http服務接收的資料需要是一個物件，基本格式是物件裡面包含陣列，陣列中又包含著若干的物件。
使用ajax調取時：在使用ajax調取的時候前端接收到的是一個數組物件，陣列中包含著若干的物件。
如有理解不當之處，歡迎各位老鐵留言指正。謝謝！！！！

ajax調取php,mysql後臺資料例項

ajax調取php,mysql後臺資料例項

PHP+Mysql 實現資料分頁顯示

html資料動態顯示、利用ajax動態顯示mysql的資料

ajax xmlhttprequest非同步獲取後臺資料(二)

Ajax 非同步或取後臺資料json顯示到頁面

ajax之前臺和後臺資料傳輸

vue入門：用axios跨域連線PHP+MySQL後臺

利用js將ajax獲取到的後臺資料動態載入至網頁中

用php+mysql+ajax實現淘寶客服或阿裏旺旺聊天功能之後臺頁面

php、mysql查詢當天,查詢本週,查詢本月的資料例項(欄位是時間戳)

mui 之ajax遇到的坑後臺接受資料為空後端服務為php

前端後臺php MySQL資料庫之間通過Ajax技術的完整連線與互動 Ajax的應用

使用ajax 進行post提交json資料到後臺php，但是後臺php收不到資料。

PHP+MySQL+Ajax實現前端頁面展示資料庫的資料

如何從資料庫調出資料顯示到頁面 PHP+Mysql+Html（簡單例項）

ECharts, PHP, MySQL, Ajax, JQuery 實現前後端資料視覺化

PHP+Ajax點選載入更多列表資料例項

再學ajax--第二天 | 基於php+mysql+ajax的表單註冊、登錄、註銷

用php+mysql+ajax實現淘寶客服或阿裏旺旺聊天功能之前臺頁面

php mysql jquery ajax 查詢數據庫三級聯動

ajax調取php,mysql後臺資料例項

相關推薦