vue + ajax + php 接口的使用小接
前端代碼： （獲取用戶信息，並渲染頁面） userinfor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用戶信息</title>
<script src='jquery-1.9.0.min.js'></script>
<script src='vue.min.js'></script>
</head>
<body>
<div id='app'>
<p v-for='item in userList'><span>{{item.userName}}</span> <span> {{item.userTel}}</span></p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
userList: []
},
created: function () {
var that = this;
$.ajax({
type : "POST",
url : "./userinfor.php",
data : "",
success : function( data ) {
var json = JSON.parse(data);
if (json.flag) {
that.userList = json.datalist;
} else {
alert(json.error_code);
}
},
error : function(){
lert("錯誤");
}
})
},
})
</script>
</html>
PHP代碼： （查詢數據庫，並形成接口輸出） userinfor.php
<?php
header("Content-type: text/html; charset=utf-8"); //定義編碼方式
// 定義接口返回值
$flag = 1;
$error_code = '查詢失敗';
$datalist = array();
$host = '43.242.131.118'; //主機ip地址
$user = 'hongmeng'; //主機用戶
$password = 'wyh19931106'; //主機用戶密碼
$connection = mysql_connect($host, $user, $password); //連接主機
if ( !$connection ) {
die('連接失敗');
}
$dbname = 'hongmeng_zl'; //數據庫名
mysql_select_db($dbname, $connection); //連接數據庫
mysql_query("SET NAMES UTF8"); //MySQL字符編碼
$sql = "select `userName`,`userTel` from `userInfor` "; //查詢語句
$result = mysql_query($sql);
if ( !$result ) {
$flag = false;
die('查詢失敗');
};
while ($row = mysql_fetch_assoc($result) ) {
// while ($row = mysql_fetch_array($result) ) {
$datalist[] = $row; //將查詢到的所有數據按行賦值給數組
}
// 返回json數據，或者字符串，數字。
$json = array('flag' => $flag, 'error_code' => $error_code, 'datalist' => $datalist );
echo json_encode($json); //將普通數組轉換成json數組，（接口返回的值）
mysql_close($connection); //斷開數據庫
?>
echo就是php返回的值，傳遞給ajax的success:function(data){}中的參數data
必須是echo的方式，不然ajax獲取不到。
返回的類型包括，字符串，數字，json。
最常用的就是json。
這里的flag表示成功，失敗。
error_code表示提示信息。
datalist可以返回結果集。
php端對數據，進行 json_encode() 處理。
前端對數據進行 JSON.parse() 處理。