axios 使用
<!DOCTYPE html>
<html lang="en">
<head>
{#导入静态文件#}
{% load static %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登陆页面</title>
{# 导入jquery #}
<script src="{% static 'js/jquery-1.12.1.min.js' %}"></script>
{# 导入axios库 #}
<script src="{% static 'js/axios.js' %}"></script>
</head>
<body>
<h1>欢迎登陆</h1>
<label>用户名</label> <input id="username" type="text"><br>
<label>密码</label> <input id="password" type="password"><br>
<span style="display:none" id="waite"> 请稍后,正在提交您的请求。。。。<br> </span>
<input onclick="login()" id="sub" type="button" value="提交">
<script> //定义登陆方法
function login(){
var username = $('#username').val()
var password = $('#password').val()
//使用axios来请求接口
//初始化传参
let param = new URLSearchParams();
//将参数传递给对象
param.append('username',username);
param.append('password',password); axios({
//指定请求地址
url:'/supermarket/do_login',
//请求参数
data:param,
//请求类型
method:'post',
//返回值类型
responseType:'text'
})
.then(function(obj){
// //将按钮失效去除
// $('#sub').removeAttr('disabled');
// //将提示文字隐藏
// $('#waite').hide();
console.log(obj);
alert(obj.data);
//判断登陆是否成功
if (obj.data == '登陆成功'){
//跳转
window.location.href = '/supermarket/productlist'
}
});
} </script>
</body>
</html>
axios 使用的更多相关文章
- 为什么axios请求接口会发起两次请求
之前在使用axios发现每次调用接口都会有两个请求,第一个请求时option请求,而且看不到请求参数,当时也没注意,只当做是做了一次预请求,判断接口是否通畅,但是最近发现并不是那么回事. 首先我们知道 ...
- axios基本用法
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...
- Axios、Lodash、TweenJS
Axios是一个基于promise的HTTP库 http://chuansong.me/n/394228451820 Lodash是一个JavaScript的函数工具集 http://www.css8 ...
- axios全攻略
随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文 ...
- 抛弃vue-resource拥抱axios
vue-resource用法 import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) 是不是 ...
- Vue+axios 实现http拦截及路由拦截
现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...
- vue使用Axios做ajax请求
vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...
- vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)
Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...
- 9.如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
问题描述: 由于restful接口需要在头部header传递两个字段: Content-Type: application/jsonAccess-Token: 84c6635800b14e0eba4f ...
- vue2.0设置proxyTable使用axios进行跨域请求
这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vue ...
随机推荐
- Python 基础知识----流程控制
判断语句 循环语句 嵌套
- snv的使用
1.搭建SVN服务器 (1)直接安装 (2)创建工号,分组,分配权限(图形化界面的直接操作,非图形界面的需要改配置文件conf文件夹下) (3)创建仓库,D:\Repositories\OA:cmd命 ...
- 【纪录】Proxychain4 使用部署以及利用 ss 加速下载操作
我觉得这个方案用来解决 linux 机器上面 apt-get 和 yum 国外源拉去取过慢的问题还是还不错的. 参看下面两个教程. Reference: https://brickyang.githu ...
- Golang的md5 hash计算
Golang计算md5值的方法都是接收byte型slice([]byte).而且使用习惯上也觉得略奇怪. 看了好几个例子才看懂. 感觉Golang标准库在设计这些模块的时候,都会考虑使用带New关键字 ...
- jvm相关参数
官方地址:https://docs.oracle.com/javase/8/docs/technotes/tools/unix/jstat.html#BEHHGFAE 一.查看jvm运行参数 1.查看 ...
- Calendar用法随笔
平时在处理时间问题的时候,一般会想到用java.util.Date类型,在使用倒时间的运算的时候,就不是很方便,找找到了java.util.Calendar类,中文意思是“日历”,以下就是自己对这个类 ...
- How to SHA1 on macOS
openssl sha1 /volumes/test/install/osx-test.dmg
- redis两种持久化
Redis 提供了不同级别的持久化方式: RDB持久化方式能够在指定的时间间隔能对你的数据进行快照存储. AOF持久化方式记录每次对服务器写的操作,当服务器重启的时候会重新执行这些命令来恢复原始的数据 ...
- hdu-2255(带权二分图)
题解:板子题.... #include<iostream> #include<cstring> #include<cstdio> #include<queue ...
- python的图形模块PIL小记
前言: 跟我一块住的室友是个搞通信,每天下班后基本必须做的事情是,第一P图,将那些不合格的图片上的数据,p成合格的.第二就是将做好的P图以及产生的日志文件按照固定的名字重新命名.我为了他能够早点睡觉, ...