码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-10-13 18:01:57      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:strong   字符   $.ajax   charset   mys   查询   返回结果   names   col   

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 接口的使用小接

标签:strong   字符   $.ajax   charset   mys   查询   返回结果   names   col   

原文地址:http://www.cnblogs.com/wangyihong/p/7662258.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!