Vue框架axios get请求（类似于ajax请求）

首先介绍下，这个axios请求最明显的地方，通过这个请求进行提交的时候页面不会刷新

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script>

    <script src="axios.js"></script>

</head>

<body>

<div id="myapp">

    <input type="button" v-on:click="showlist" value="点我">

    <ul>

        <li v-for="item in stulist">

            代码：{{ item.cityCode}}

            城市：{{ item.cityName}}

        </li>

    </ul>

</div>

</body>

<script>

    new Vue({

        el:'#myapp',

        data:{

            stulist:[]

        },

        methods:{

            showlist:function () {

                url="./hotcity.json";    这是一个自定义的json数据文件

                var self = this;

                axios.get(url)

                    .then(function (response) {

                        self.stulist = response.data.data.hotCity;

                        console.log(response)

                    .catch(function (err) {

                      })

                 })

            }

        }

    })

</script>

</html>

Vue框架axios post请求（类似于ajax请求）

这个查看数据使用get请求，但是添加数据的时候如果使用get请求的话，需要添加的数据就会暴露在url中。所以使用axios中的post请求将数据存放在请求体中

这样用户的数据就会很安全。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script>

    <script src="axios.js"></script>

</head>

<body>

    <div id="myapp">

        <input type="text" value="username" v-model="uname">

        <input type="text" value="password" v-model="passw">

        <input type="button" value="提交" v-on:click="login">

    </div>

    <script>

        new Vue({

            el:'#myapp',

            data: {

                uname:'',

                passw:''

            },

            methods:{

                login:function () {

                    alert(222);

                    url = "hotcity.json";

                    axios.post(url,{

                        name:this.uname,

                        password:this.passw

                    },{

                        "headers":{"Content-Type":"application/x-www-form-urlencoded"}

                    }).then(function (response) {

                        console.log(response)

                        if (response.code == 1){

                            window.location.href = "http://www.baidu.com"

                        }

                    }).catch(function (error) {

                    })

                }

            }

        })

    </script>

</body>

</html>

　　

Vue框架axios请求（类似于ajax请求）的更多相关文章

  1. Vue（七）发送Ajax请求

    发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue ...

  2. 关于HTTP请求、Ajax请求，请求的同步和异步

    使用了很长时间的Ajax请求了,一直都是在以异步的方式在使用.昨天听了一个讲座涉及到apache server,偶然想到了这Ajax请求和HTTP请求的一些区别和联系,就在网上好好搜了一顿,把搜到的结 ...

  3. Java过滤器处理Ajax请求，Java拦截器处理Ajax请求，java 判断请求是不是ajax请求

    Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,java 判断请求是不是ajax请求   Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 java ...

  4. vue项目使用axios发送请求让ajax请求头部携带cookie

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知ax ...

  5. vue 封装 axios 和 各类的请求，以及引入 .vue 文件中使用

    //src 底下建立 api 文件夹 // api 文件夹下建立 request,js 文件,文件内容复制下面这段代码即可   /**  * ajax请求配置  */ import axios fro ...

  6. Vue中使用echarts，ajax请求的远程数据赋值给图表不刷新的问题和解决办法

    问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...

  7. 在springmvc框架中，通过ajax请求，响应至前端的中文显示是?

    今天遇到的一个问题,我通过ajax请求去访问控制器,然后通过控制器给我响应了一段json数据,但是里面的中文 在浏览上显示是??,我在web.xml 文件中是设置了编码过滤器的,但是估计这个编码过滤器 ...

  8. 使用NSURLProtocol和NSURLSession拦截UIWebView的HTTP请求(包括ajax请求)

    问题:服务器端有一个网站需要AD认证,整站都开了Basic认证,包括图片,CSS等资源,我在HTTP请求头里面添加认证所需的用户名和密码,传递到服务器端可以认证通过.我在UIWebView的shoul ...

  9. 如何判断一个请求为ajax请求？

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和XML). ajax的请求头如下: 如上图所示具有“X-Request-With”属性,该 ...

随机推荐

  1. python初识(一)

    python语言的发展 python语言诞生于1990年,由Guido van Rossum设计并领导开发. 1989年12月,Guido为打发圣诞节时间而开发的项目. python名字的由来,由于当 ...

  2. Android轮播图

    轮播图是很常用的一个效果 核心功能已经实现 没有什么特殊需求 自己没事研究的 所以封装的不太好 一些地方还比较糙 为想要研究轮播图的同学提供个参考目前测试图片为mipmap中的图片 没有写从网络加载图 ...

  3. python中干掉tornado的连接失败日志

    用了tornado真的是比较舒服,很多事都为你做好了. 但也有不令人满意的地方--对于我这个洁癖来说,自动给我的控制台打印不受我控制的信息是不能忍受的. 连接到一个新的地方,如果失败,tornado会 ...

  4. 《Linux命令行与shell脚本编程大全》- 读书笔记2 - 更多的bash shell命令

    更多的bash shell命令 想检测进程,需要熟悉ps命令的用法.ps命令好比工具中的瑞士军刀,它能输出运行在系统上的所有程序的许多信息.默认情况下,ps命令只会显示运行在当前控制台下的属于当前用户 ...

  5. 归并排序及优化(Java实现)

    普通归并排序 public class MergeSort { /** * @param arr 待排序的数组 * @param left 本次归并的左边界 * @param mid 本次归并的中间位 ...

  6. modal verbs（一）

    什么是modal verb?翻译成中文就是情态动词. modal的意思是模式的,情态的,形式的.Bootstrap中的模态框就是这个词modal. 情态动词翻译挺准确的,就是表达说话人的情绪,态度或语 ...

  7. jsp的四种范围

    jsp有四种范围,可以说是四种对象,这四种对象对应不同的作用范围,所以我们说jsp中的四种范围,这四种范围作用域由大到小分别是page>request>session>applica ...

  8. 实现Canvas2D绘图 使元素绕中心居中旋转

    我之前用canvas写了个头像剪切的demo,但是关于让载入的图片旋转是个问题,虽然通过其它方法实现了,但是感觉并不太好,于是查了些资料,想试着重新做一下canvas的旋转. 在开始之前,先让我们来做 ...

  9. java设计模式-State（状态）模式

    state定义     不同的状态,不同的行为;或者说,每个状态有着相应的行为.         就像电风扇的开关,一档的上一个是关闭,关闭的上一个是五档,五档的上一个是四档,以此类推,而且五档的下一 ...

  10. swift 创建九宫格在后面加按钮

    项目中的需求是前面图片,在图片最后面始终有按钮如图 图片 let space:CGFloat = 10 for i in 0..model.count{ let itemWidth:CGFloat = ...