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() 处理。
vue + ajax + php 接口的使用小接
原文地址：http://www.cnblogs.com/wangyihong/p/7662258.html