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. 二:搭建一个webpack3.5.5项目:建立项目的webpack配置文件

    第一步: npm init -y [初始文件] npm info webpack / bower info webpack[查看版本,用bower的时候要先 npm install bower] np ...

  2. quartz源码分析——执行引擎和线程模型

    title: quartz源码分析--执行引擎和线程模型 date: 2017-09-09 23:14:48 categories: quartz tags: [quartz, 源码分析] --- - ...

  3. 一种解决url的get请求参数传值乱码问题的方式

    做项目的时候发现url get请求传中文字符出现乱码问题,百度了一下,最后用一种比较容易理解的方式解决了.分享给大家! 经过百度,网友提到:url get方式提交的参数编码,只支持iso8859-1编 ...

  4. unix下的文件和目录详解以及操作方法

    前言:unix下一切东西都是文件,一共有7种不同的文件,前一篇博客已经讲解的很清楚了,不懂的可以看看这里.当然,博主知道有些朋友比忙,没时间看,那我就简单点讲讲这7中文件都有哪些吧. 文件类型包括在s ...

  5. 4th-结对编程2

    0x00 Coding Coding地址/小伙伴的博客地址 合作伙伴:庞伊凡(201421123011).赵娅汀(201421123012) 0x01 题目描述 上一周大家为四则运算程序设计了2-3个 ...

  6. 3rd-Bing Dict使用分析

    英语学习APP的案例分析 0x00 写在前面 我们生活中很多时候要和软件打交道,大家上课开小差时候玩的手机游戏,买火车票的网站,互相联系用的微信.QQ,等等都是软件,都很值得分析.你为何成为它们的用户 ...

  7. Swing-JOptionPane对话框用法-入门

    对话框是GUI程序中常见的界面,通常用来反馈提示信息.告警或获取用户输入.比如这种: JOptionPane是Swing中的一个对话框类,它能够提供常见的绝大多数对话框效果,本文对这个类进行介绍.需要 ...

  8. 201521123052《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 学习了更多markdown的知识 参考资料: 百度脑图 XMind 2. 书面作 ...

  9. 201521123062 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  10. 201521123070 《JAVA程序设计》第14周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 Q1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现 ...