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. makefile中":=","=","?=","+=" 之间的区别

    区别:  := 有关位置的等于,值取决于当时位置的值 = 无关位置的等于,值永远等于最后的值 ?= 是如果没有被赋值过就赋予等号后面的值+= 是添加等号后面的值 '=':无关位置的等于 比如: x = ...

  2. ZXing生成条形码、二维码、带logo二维码

    采用的是开源的ZXing,Maven配置如下,jar包下载地址,自己选择版本下载,顺便推荐下Maven Repository <!-- https://mvnrepository.com/art ...

  3. MPLS LDP随堂笔记1

    LDP 的使用原因(对于不同协议来说) LDP的四大功能 发现邻居 hello 5s 15s 224.0.0.2 发现邻居关系 R1 UDP 646端口 R2 UDP 646端口 此时形成邻居 建立邻 ...

  4. 1001.A+B Format (20)的解题

    关于A+B的正确打开方式! 解题思路 gitub 也是研究了很久才学会了本地上传,中间还遇到一些问题,多亏学长的教程跟搜索引擎的帮忙解决啦! 我想还是了解题目的意思是解题的最关键,通过了查词软件跟自身 ...

  5. 团队作业10--Beta阶段项目复审

    小组的名字和链接 优点 缺点 最终排名 油炸咸鱼 http://www.cnblogs.com/24app/ 基本功能实现,能够完成预期达到的大部分功能,并能够修复所有自己提出的bug,界面也还行,博 ...

  6. 团队作业八——第二次团队冲刺（Beta版本）第3天

    一.每个人的工作 (1) 昨天已完成的工作 对界面进行完善,并增加简单界面(包含简单界面内含的界面),简单模式与复杂模式的选择界面. (2) 今天计划完成的工作 做一下用户注册的功能和登录功能. (3 ...

  7. 201521123079《java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 流与文件 I/O流:Input/Output处理的简称,本质上就是一个数据序列.分为输入流Input Stre ...

  8. 201521123066 《Java程序设计》第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 有关异常的知识点: 一段代码可能生成多种类型的异常,子类异常必须放在父类异常前面,否则会出现编译错误: 可以 ...

  9. 解决vsftp无法启动问题（转）

    [root@node11 ~]# service vsftpd restartShutting down vsftpd:                                      [F ...

  10. java类成员变量与代码块初始化

    首先根据下面的这个一段代码:引入关于java初始化顺序的问题public class InitationTest extends Person { public InitationTest() { S ...