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. IntelliJ IDEA 2017.1.5迁移eclipse，SSM项目，通过jrebel实现热部署

    1.首先打开idea,配置SVN版本控制器的路径 2.配置maven 3.配置jrebel热部署的路径 4.从svn到出项目 5.配置配置tomacat参数-server -XX:PermSize=1 ...

  2. ReactNative环境配置的坑

    我用的是windows开发android,mac的可以绕道了. 1.android studio及Android SDK的安装 现在需要的Android版本及对应的tool 2.真机运行要配置对and ...

  3. poj 1562 dfs

    http://poj.org/problem?id=1562 #include<iostream> using namespace std; ,m=,sum=; ][]; ][]={-,, ...

  4. iOS 跑马灯带图片可点击

    项目中有个需求,需要以跑马灯的形势滚动展示用户的实时数据,跑马灯需要有用户头像,内容的长度不固定,并且可以点击,滚动效果还要足够流畅,本着不重复造轮子的心理,在网上各种搜索,发现都没法找到满足需求的d ...

  5. spring MVC 原理及源码解析

    首先要知道springmvc的核心控制器dispatcherServlet(继承自httpServlet) 一般httpServlet的请求过程: 1.初始化(创建servlet实例时)时会执行ser ...

  6. 【RabbitMQ系列】 Spring mvc整合RabbitMQ

    一.linux下安装rabbitmq 1.安装erlang环境 wget http://erlang.org/download/otp_src_18.2.1.tar.gz tar xvfz otp_s ...

  7. Beta冲刺 总结

    Beta冲刺 总结 1. 完成情况 经过了为其七天的beta冲刺,我们基本完成了之前在<beta开始前准备>博客中所列出的内容. 增加关于征信的功能,贴近选题主题.在学生的信用活动记录中添 ...

  8. 201621123050 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 答 ...

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

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

  10. 团队作业7——第二次项目冲刺（Beta版本）

    Deadline: 2017-12-10 23:00PM,以博客发表日期为准.   评分基准: 按时交 - 有分,检查的项目包括后文的三个方面 冲刺计划安排(单独1篇博客) 七天的敏捷冲刺(每两天发布 ...