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异步刷新局部页面的小李子
看到下面那幅图没有,我们要的是当点击确定以后,根据条形码搜索出商品信息,并且异步刷新右边页面:
随机推荐
- 二:搭建一个webpack3.5.5项目:建立项目的webpack配置文件
第一步: npm init -y [初始文件] npm info webpack / bower info webpack[查看版本,用bower的时候要先 npm install bower] np ...
- quartz源码分析——执行引擎和线程模型
title: quartz源码分析--执行引擎和线程模型 date: 2017-09-09 23:14:48 categories: quartz tags: [quartz, 源码分析] --- - ...
- 一种解决url的get请求参数传值乱码问题的方式
做项目的时候发现url get请求传中文字符出现乱码问题,百度了一下,最后用一种比较容易理解的方式解决了.分享给大家! 经过百度,网友提到:url get方式提交的参数编码,只支持iso8859-1编 ...
- unix下的文件和目录详解以及操作方法
前言:unix下一切东西都是文件,一共有7种不同的文件,前一篇博客已经讲解的很清楚了,不懂的可以看看这里.当然,博主知道有些朋友比忙,没时间看,那我就简单点讲讲这7中文件都有哪些吧. 文件类型包括在s ...
- 4th-结对编程2
0x00 Coding Coding地址/小伙伴的博客地址 合作伙伴:庞伊凡(201421123011).赵娅汀(201421123012) 0x01 题目描述 上一周大家为四则运算程序设计了2-3个 ...
- 3rd-Bing Dict使用分析
英语学习APP的案例分析 0x00 写在前面 我们生活中很多时候要和软件打交道,大家上课开小差时候玩的手机游戏,买火车票的网站,互相联系用的微信.QQ,等等都是软件,都很值得分析.你为何成为它们的用户 ...
- Swing-JOptionPane对话框用法-入门
对话框是GUI程序中常见的界面,通常用来反馈提示信息.告警或获取用户输入.比如这种: JOptionPane是Swing中的一个对话框类,它能够提供常见的绝大多数对话框效果,本文对这个类进行介绍.需要 ...
- 201521123052《Java程序设计》第5周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 学习了更多markdown的知识 参考资料: 百度脑图 XMind 2. 书面作 ...
- 201521123062 《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- 201521123070 《JAVA程序设计》第14周学习总结
1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 Q1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现 ...