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. 没有闲话和grunt.initConfig()

    grunt.initConfig()为Gruntfile.js的核心部分,它接收对象作为参数. 对象包含两种类型的属性,一种是单纯的变量,一种是task类型.举个栗子: grunt.initConfi ...

  2. 转：【Java并发编程】之十九：并发新特性—Executor框架与线程池（含代码）

      Executor框架简介 在Java5之后,并发编程引入了一堆新的启动.调度和管理线程的API.Executor框架便是Java 5中引入的,其内部使用了线程池机制,它在java.util.coc ...

  3. 201521123024《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 注意conve ...

  4. 201521123057 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过? ...

  5. 201521123023《Java程序设计》第五周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 Q1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过 ...

  6. 201521123047 《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 答: - 只能有一个父类,即单继承,子类继承父类的全部成员(属性和方法),并可能有自己特有的 ...

  7. Python IDLE快捷键一览

    编辑状态时:Ctrl + [ .Ctrl + ] 缩进代码Alt+3 Alt+4 注释.取消注释代码行Alt+5 Alt+6 切换缩进方式 空格<=>TabAlt+/ 单词完成,只要文中出 ...

  8. php数据库连接及简单操作

    数据库改密码:mysql的控制台mysql console 中文乱码解决方法:原因编码格式不一致1.建立数据库的时候,字符集选择utf-82.修改mysql的配置:在[mysqld]模块下面添加cha ...

  9. 《Java从入门到放弃》JavaSE入门篇：文件操作

    Java中的文件操作还有点小复杂··· 不过没关系,我会把它讲得很简单,嘿嘿嘿!!! 在讲Java中的文件操作前,先了解一个概念--"流",比如我们把一个杯子的水倒到另一个同样大小 ...

  10. python 输出颜色的与样式的方法

    上次遇到这个问题就想写下来,其实当时我也不怎么会,老师说这个东西不需要理解,只需要死记硬背,写的多了就记住了,所以今天搜集了几篇文章,加上自己的理解,写下了这篇python 输出颜色的样式与方法的文章 ...