vue + ajax + php 接口的使用小接
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 接口的使用小接的更多相关文章
- vue ajax获取数据的时候，如何保证传递参数的安全或者说如何保护api的安全
https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...
- 关于jquery的$.ajax发接口的同步与异步问题
1.在使用$.ajax发接口时想对返回数据做一些处理后拿到其他方法中使用 发请求函数如下: function getProjectName(projectId){ project.projectNam ...
- Vue调用百度接口做百度搜索
这两天由于学习需要,需要用vue来调用api接口,但是以前没怎么接触过用vue来调用接口,不会没关系,发挥我们强大的学习能力,都不是事,学习了半天基本也就可以初级上手了,写篇随笔记录下来,方便以后回顾 ...
- Ajax请求的几个小练习
Ajax请求的几个小练习 准备工作 路由中做了分发: re_path('^app01/',include('app01.url')) app01中url.py文件的内容: from django.ur ...
- Vue+ajax的使用小结
js var vue = new Vue({ el:"#vueid", data:{ selectById : "", }, methods:{ yourMet ...
- bash: express: command not found及vue连接数据库调接口
今天在使用express -e . 的命令时,cmd给我报了一段不识别的错误: bash: express: command not found ,在网上查了一下,有人指出是express4的版本将命 ...
- 使用HBuilder开发移动APP：ajax调用接口数据
既然要做APP,与接口交互式少不了的,除非只是想做一个纯静态的APP.所以html5+的环境准备好后,我最先开始研究的就是如何与接口交互. 使用HBuilder新建示例教程后,里面会有一个ajax(网 ...
- Ajax获取接口数据，url拼接参数跳转页面，js获取上一级页面参数给本页面
1.Ajax获取接口数据 function demo(){ //假设请求参数 var requestBody = [{ "name":"zhang", &quo ...
- Ajax异步刷新局部页面的小李子
看到下面那幅图没有,我们要的是当点击确定以后,根据条形码搜索出商品信息,并且异步刷新右边页面:
随机推荐
- ubuntu16.04下源码安装onos1.0.2
由于工作需要,下载安装onos1.0.2的版本,大家看需求可以下载安装更高级的版本 参考链接:http://www.sdnlab.com/14650.html 1.系统环境 Ubuntu16.04 L ...
- [ASP.NET MVC]笔记（三） 成员资格、授权和安全性
阻止CSRF(跨站请求伪造) ASP.NET MVC提供了一个阻止CSRF攻击的好方法 在每个提交的表单中包含 @using (Html.BeginForm("Index", &q ...
- Java中死锁的简单例子及其避免
死锁:当一个线程永远地持有一个锁,并且其他线程都尝试获得这个锁时,那么它们将永远被阻塞.比如,线程1已经持有了A锁并想要获得B锁的同时,线程2持有B锁并尝试获取A锁,那么这两个线程将永远地等待下去. ...
- linux c编程：初识进程与线程
p { margin-bottom: 0.25cm; line-height: 120% } (一) 认识进程 在Linux系统中,每一个进程都有自己的ID,就如同人的身份证一样.linux中有一个数 ...
- 事后诸葛亮分析（Beta版本）
全组讨论的照片 设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 解决代码分析.统计.管理等问题,定义的很清楚,有清晰的描述. 是否有充足的时间来做计划? ...
- 团队作业8——第二次项目冲刺（Beta阶段）--第六天
一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 学号 成员 贡献比 201421123001 廖婷婷 16% 201421123002 翁珊 16% 201421123004 ...
- JAVA基础第五组（5道题）
21.[程序21] 题目:求1+2!+3!+...+20!的和 1.程序分析:此程序只是把累加变成了累乘. 思路:用递归的思想. package com.niit.homework1; import ...
- 201521123081《Java程序设计》 第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 参考资料:XMIND 1.2 选做:收集你认为有用的代码片段 2. 书面作业 本次作业题集 集合 Q1. Li ...
- 201521123005 《Java程序设计》 第十周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...
- 201521123071 《JAVA程序设计》第十周学习总结
第十周-异常与多线程 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业:本次PTA作业题集异常.多线程 1. finally:题目4-2 1. ...