需求:
1:在登陆页面输入账号密码后,ajax异步提交数据给后端验证。
2:验证通过后,后端指定跳转页面,并把页面封装进返回的Json数据中,由ajax控制from表单跳转到目标页面
一:登陆页面HTML代码
页面的跳转主要通过ajax控制form表单的action动作完成。因此如果action属性有url,那么后端不指定跳转页面的话,会默认跳转此页面,下面代码中,默认跳转到home页面
另外需要注意的是:利用submit()跳转页面,点击的按钮的type是button(网上还有其他跳转方法,但是我没有实现过,目前就这种方法成功完成过form表单下ajax控制跳转)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css"> <title>Document</title> </head> <body> <div class="container"> <div class="row" style="margin-top: 100px"> <form id = "myform" class="form-horizontal" action="/home/" method="get"> {% csrf_token %} <div class="form-group"> <label class="col-sm-4 control-label">用户名</label> <div class="col-sm-4"> <input type="text" class="form-control" name="username" placeholder="用户名"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label">密码</label> <div class="col-sm-4"> <input type="password" class="form-control" name = ‘pwd‘ placeholder="密码"> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-4"> <button type="button" class="btn btn-default">登陆</button> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-4"> <span>hello world</span> </div> </div> </form> </div> </div> <script src="/static/jquery-3.3.1.min.js"></script> <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script> <script src="/static/setupAjax.js"></script> <script src =‘/static/sweetalert‘></script> </body> </html>
二:后端login视图文件
def login(request): if request.method == ‘POST‘: username = request.POST.get(‘username‘) pwd = request.POST.get(‘pwd‘) user = authenticate(username=username, password=pwd) if user: # 验证成功 login(request, user) # 编辑的json数据,其中的url可以根据需求制定 data = {‘code‘: 1, ‘url‘: ‘http://www.baidu.com‘} else: # 验证成功失败,返回错误原因 data = {‘code‘: 0, ‘msg‘: ‘用户名或密码错误‘} return JsonResponse(data) return render(request, ‘login.html‘)
三:Js代码
逻辑分析:
1:点击事件发生后,获取输入框数据并发生给后端
2:对取到的数据做判断,验证成功则把后端指定的url赋值给form表单的action属性,最后控制form表单执行跳转。验证失败则弹出提示信息
<script> $(‘:button‘).on(‘click‘,function () { var username = $(‘:text‘).val(); var pwd = $(‘:password‘).val(); var $form = $(‘#myform‘); $.ajax({ url:‘/login/‘, type:‘post‘, data:{username:username,pwd:pwd}, success:function (data) { if (data.code){ $form.attr(‘action‘,data.url); console.log($form.attr(‘action‘)); $form.submit() }else { alert(data.msg) } } }) }) </script>
原文地址:https://www.cnblogs.com/li1992/p/9244900.html
时间: 2024-10-10 15:58:45