<!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>