vue + ajax + php 接口的使用小接
Posted 梦幻飞雪
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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() 处理。
以上是关于vue + ajax + php 接口的使用小接的主要内容,如果未能解决你的问题,请参考以下文章
实现简单的PHP接口,以及使用js/jquery ajax技术调用此接口