<!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 使用的更多相关文章

  1. 为什么axios请求接口会发起两次请求

    之前在使用axios发现每次调用接口都会有两个请求,第一个请求时option请求,而且看不到请求参数,当时也没注意,只当做是做了一次预请求,判断接口是否通畅,但是最近发现并不是那么回事. 首先我们知道 ...

  2. axios基本用法

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...

  3. Axios、Lodash、TweenJS

    Axios是一个基于promise的HTTP库 http://chuansong.me/n/394228451820 Lodash是一个JavaScript的函数工具集 http://www.css8 ...

  4. axios全攻略

    随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文 ...

  5. 抛弃vue-resource拥抱axios

    vue-resource用法 import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) 是不是 ...

  6. Vue+axios 实现http拦截及路由拦截

    现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...

  7. vue使用Axios做ajax请求

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...

  8. vue全家桶(Vue+Vue-router+Vuex+axios)（Vue+webpack项目实战系列之二）

    Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...

  9. 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 ...

  10. vue2.0设置proxyTable使用axios进行跨域请求

    这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vue ...

随机推荐

  1. Linux基础学习笔记6-SHELL编程

    编程基础 程序:指令+数据 程序编程风格: 过程式:以指令为中心,数据服务于指令 对象式:以数据为中心,指令服务于数据 shell程序:提供了编程能力,解释执行 编程基本概念: 顺序执行:循环执行:选 ...

  2. Linux基础学习笔记5-软件管理

    包管理器 二进制应用程序的组成部分: 二进制文件.库文件.配置文件.帮助文件 程序包管理器: debian:deb文件.dpkg包管理器 redhat:rpm文件.rpm包管理器 rpm:Redhat ...

  3. python爬虫之win7Mongod安装使用

    1.下载地址:https://www.mongodb.com/download-center#community 下载完成以后下一步下一步安装. 安装路径 还需要建立一个数据库存储位置C:\mongo ...

  4. Linux基础学习（13）--Linux系统管理

    第十三章——Linux系统管理 一.进程管理 1.进程查看: (1)进程简介:进程是正在执行的一个程序或命令,每一个进程都是一个运行的实体,都有自己的地址空间,并占用一定的系统资源. (2)进程管理的 ...

  5. python函数、模块、包

    一.函数 定义函数: def fun_name(para_list): coding def fun_name(para_list): coding return xxx 使用函数,fun_name( ...

  6. 莫烦keras学习自修第二天【backend配置】

    keras的backend包括tensorflow和theano,tensorflow只能在macos和linux上运行,theano可以在windows,macos及linux上运行 1. 使用配置 ...

  7. WEB测试重点--(转载)

    1.功能测试: 所实现的功能是否和需求一致: js错误 页面链接错误-空链接.死链接.错误链接 按钮无效 未实现功能 报错提示信息不准确或不友好 数据库访问错误 sql注入 文档上传下载问题 -未实现 ...

  8. Ajax之Jquery封装使用举例

    <html> <head> <meta charset="UTF-8"> <title>登陆页面</title> < ...

  9. linux寻找依赖文件

    在linux下编译安装软件有时候会遇到依赖文件找不到的情况,很多时候可以通过 sudo apt install -f 来解决:实在找不到怎么办,还有一个绝招可以用: 安装  apt-file sudo ...

  10. Unable to resolve target 'android-15'

    SDK 15没有加载造成的,在SDK Manager.exe下安装以下文件 Android SDK Tools (25.2.5) Android SDK Platform-tools (28.0.1) ...