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. MYSQL数据库学习十八 数据库维护和性能提高

    18.1 数据备份 可能造成数据损失的原因有: 存储介质故障:保存数据库文件的磁盘设备损坏,用户没有数据库备份导致数据彻底丢失. 用户的错误操作:如误删了某些重要数据,甚至整个数据库. 服务器的彻底瘫 ...

  2. 搭建nuxtjs程序 —— 用户信息 or token怎么不丢失

    框架背景:开发框架采用vue,需要更好的SEO,更快的内容到达时间,从浏览器看不到对服务器的请求接口,选用开箱即用的nuxtjs. 问题背景:1. 前后分离,需前端存储token及登录后的用户信息: ...

  3. PAT-L3-球队“食物链”-dfs-状压-set

    题目分析: 1. 一场双循环赛制的篮球赛,注意双循环,双循环! 2. 共有n只球队,两两之间有胜有负有平局: 3. 输入: 举例: 第一行:W:代表球队1打赢过这只队伍 L:代表球队2没打赢过这只队伍 ...

  4. Spring Framework 简介

    Spring Framework 依赖注入.事务管理.Web应用程序.数据访问.消息传递.测试和更多的核心支持. Tips: Spring 官网:https://spring.io/ spring f ...

  5. [日常] Codeforces Round #440 Div.2 大力翻车实况

    上次打了一发ABC然后大力翻车...上午考试又停电+Unrated令人非常滑稽...下午终于到了CF比赛... 赛前大力安利了一发然后拉了老白/ $ljm$ / $wcx$ 一起打, 然后搞了个 TI ...

  6. Java基础学习笔记二十一 多线程

    多线程介绍 学习多线程之前,我们先要了解几个关于多线程有关的概念.进程:进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 线 ...

  7. Rails 定时任务——whenever实现周期性任务

    根据项目的进展,我们需要实现后台进行定时读取信息的功能,而最关键的实现部分是周期性功能,根据调研,决定使用whenever来实现这一功能. github:https://github.com/java ...

  8. 201621123040《Java程序设计》第八周学习总结

    1.本周学习总结 2.书面作业 2.1ArrayList代码分析 2.1.1解释ArrayList的contains源代码 ArrayList.contain()方法通过调用indexOf()来判断元 ...

  9. 201621123062《java程序设计》第六周作业总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰 ...

  10. python 进程复习

    import os import time ret = os.fork() # 创建子线程 if ret ==0: # 子进程中返回值为0,父进程>0 while True: print('.. ...