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 接口的使用小接的更多相关文章

  1. vue ajax获取数据的时候，如何保证传递参数的安全或者说如何保护api的安全

    https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...

  2. 关于jquery的$.ajax发接口的同步与异步问题

    1.在使用$.ajax发接口时想对返回数据做一些处理后拿到其他方法中使用 发请求函数如下: function getProjectName(projectId){ project.projectNam ...

  3. Vue调用百度接口做百度搜索

    这两天由于学习需要,需要用vue来调用api接口,但是以前没怎么接触过用vue来调用接口,不会没关系,发挥我们强大的学习能力,都不是事,学习了半天基本也就可以初级上手了,写篇随笔记录下来,方便以后回顾 ...

  4. Ajax请求的几个小练习

    Ajax请求的几个小练习 准备工作 路由中做了分发: re_path('^app01/',include('app01.url')) app01中url.py文件的内容: from django.ur ...

  5. Vue+ajax的使用小结

    js var vue = new Vue({ el:"#vueid", data:{ selectById : "", }, methods:{ yourMet ...

  6. bash: express: command not found及vue连接数据库调接口

    今天在使用express -e . 的命令时,cmd给我报了一段不识别的错误: bash: express: command not found ,在网上查了一下,有人指出是express4的版本将命 ...

  7. 使用HBuilder开发移动APP：ajax调用接口数据

    既然要做APP,与接口交互式少不了的,除非只是想做一个纯静态的APP.所以html5+的环境准备好后,我最先开始研究的就是如何与接口交互. 使用HBuilder新建示例教程后,里面会有一个ajax(网 ...

  8. Ajax获取接口数据，url拼接参数跳转页面，js获取上一级页面参数给本页面

    1.Ajax获取接口数据 function demo(){ //假设请求参数 var requestBody = [{ "name":"zhang", &quo ...

  9. Ajax异步刷新局部页面的小李子

    看到下面那幅图没有,我们要的是当点击确定以后,根据条形码搜索出商品信息,并且异步刷新右边页面:

随机推荐

  1. JavaWeb程序连接SQLserver数据库

    声明:一直以来都以为javaweb程序连接数据库是一个很高大上很难的问题,结果今天学习了一下,不到两个小时就解决了,所以总结一篇博客. JavaWeb程序连接SQLserver数据库分为一下步骤: 1 ...

  2. 在Android上仿百度贴吧客户端Loading图标小球

    封面 前言 使用百度贴吧客户端的时候发发现加载的小动画挺有意思的,于是自己动手写写看.想学习自定义View以及自定义动画的小伙伴一定不要错过哦. 读者朋友需要有最基本的canvas绘图功底,比如画笔P ...

  3. python 求解线性方程组

    Python线性方程组求解 求解线性方程组比较简单,只需要用到一个函数(scipy.linalg.solve)就可以了.比如我们要求以下方程的解,这是一个非齐次线性方程组: 3x_1 + x_2 - ...

  4. Spring Ioc DI 原理

    IOC(DI):其实这个Spring架构核心的概念没有这么复杂,更不像有些书上描述的那样晦涩.Java程序员都知道:java程序中的每个业务逻辑至少需要两个或以上的对象来协作完成,通常,每个对象在使用 ...

  5. 第二次项目冲刺（Beta阶段）5.22

    1.提供当天站立式会议照片一张 会议内容: ①检查前一天的任务情况,将遇到的困难反馈.解决. ②制定新一轮的任务计划. 2.每个人的工作 (1)工作安排 队员 今日进展 明日安排 王婧 #53(完成) ...

  6. [转载] sublime text 2 调试python时结果空白

    之前用的时候都一切正常,今天突然就出现了这个问题.按ctrl+b执行的时候结果只有空白,查了很多文章都只提到了中文路径.系统路径等等,没有解决问题,直到看到了这篇文章:http://384444165 ...

  7. JAVA课程设计+购物车 个人博客

    1. 团队课程设计博客链接 2.个人负责模块或任务说明 将数据库中已经存在的商品取出,用表格显示到页面中. 实现在商品页面的购买,直接弹出消息框,输出价格,实现购买. 实现在商品页面进行添加购物车,并 ...

  8. 201521123054 《Java程序设计》第14周学习总结

    1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 1.1建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 1.2在自己建立的数据库上执行常见SQL语句 ...

  9. 201521123049 《JAVA程序设计》 第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...

  10. 201521123119《Java程序设计》第12周学习总结

    1. 本周学习总结 Q1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doub ...