vue + ajax + php 接口的使用小接

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() 处理。