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. Unity2017.x 版本的下载安装

    Unity2017 版本从2017年7月开始正式发布Unity2017.1版本,为了初学者更加清晰明了的掌握全过程,笔者还是以完整的共19个步骤来给大家演示下载与配置安装的全过程,方便广大读者的无障碍 ...

  2. MPLS LDP随堂笔记2

    前一天排错 Acl 1 匹配所有ospf的数据包 (目的 ospf建立邻居关系 传递路由条目) 2 放行UDP报文 让LDP邻居能互相收发HELLO包 4 放行TCP报文 让LDP邻居能够建立TCP会 ...

  3. 201521123083《Java程序设计》第12周学习总结

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

  4. 团队作业9——展示博客（Bata版本）

    1.团队成员介绍及项目地址 团队的源码仓库地址:https://coding.net/u/app24dian/p/app24dian/git 陈麟凤:(http://www.cnblogs.com/c ...

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

    一.站立式会议照片 二.项目燃尽图 三.项目进展 功能模块的代码编写完成,界面布局规划已经定型,不会有大的修改,接下去就是主要解决存在的bug以及各种测试. 队员  ID 贡献比 王若凡 201421 ...

  6. 201521123008《Java程序设计》第十三周学习总结

    1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? ping w ...

  7. Java程序设计-表达式运算(个人博客)

    1.团队课程设计博客链接 洪亚文博客链接:http://www.cnblogs.com/201521123065hyw/ 郑晓丽博客链接:http://www.cnblogs.com/zxl3066/ ...

  8. 多线程面试题系列（14）：读者写者问题继 读写锁SRWLock

    在第十一篇文章中我们使用事件和一个记录读者个数的变量来解决读者写者问题.问题虽然得到了解决,但代码有点复杂.本篇将介绍一种新方法--读写锁SRWLock来解决这一问题.读写锁在对资源进行保护的同时,还 ...

  9. csv模块简单使用

    json是一种嵌套了列表与字典的格式,json包可以读取返回的json格式,json.load(html返回的对象) csv模块,用来操作csv文件, import csv #from os impo ...

  10. webservice03#schema#元素属性定义

    工具软件XMLSpy 2010 破解版,是非常好的写XMl的工具软件. 1,Schema的好处: Schema出现的目的是通过一个更加合理的方式来编写xml的限制文件(基于xml语法的方式): Sch ...