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. JavaScript学习日志（二）：面向对象的程序设计

    1,ECMAScript不像其他面向对象的语言那样有类的概念,它的对象与其他不同. 2,ECMAScript有两种属性:数据属性和访问器属性.([[]]这种双中括号表示属性为内部属性,外部不可直接访问 ...

  2. （三）、LNMP的搭建，并制作rpm包

    中小型规模网站集群架构:yum仓库搭建 : 矮哥linux运维群:93324526 编译的三条命令的规则 ./configure 就是在本地创建了一个Makefile文件 (也就是指定一下各种配置参数 ...

  3. PHP面向对象知识点

    public private protected __construct() __destruct() __set() __get() extends(继承) :: (重载) abstract cla ...

  4. 转：【Java并发编程】之十五：并发编程中实现内存可见的两种方法比较：加锁和volatile变量

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17290021 在http://blog.csdn.net/ns_code/article/ ...

  5. java第十一次作业

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

  6. 201521123119《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 Q1.常用异常 题目5-1 Q1.1 截图你的提交结果(出现学号) Q1.2 ...

  7. .Net45下HttpClient的几个缺陷

    前言 最近在写WebClientApi这个组件,底层使用HttpClient,发现HttpClient有许多低级的错误,使用者一不小心就可能会正常的去调用它的这些错误,得不到预期的结果.本文我把我认为 ...

  8. node.js的安装及配置

    一.安装 直接在浏览器搜索node.js,在官网上下载(一般旧版的更加稳定,比如下载4.4.7版本) 点击DOWNLOADS 往下翻,点击Previous Release Windows下载msi(6 ...

  9. POJ-3045 Cow Acrobats (C++ 贪心）

    Description Farmer John's N (1 <= N <= 50,000) cows (numbered 1..N) are planning to run away a ...

  10. JPA关系映射之many-to-many

    @ManyToMany Board表实体类 @Entity @Cache(usage=CacheConcurrencyStrategy.NONSTRICT_READ_WRITE) @Table(nam ...