需求：
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>Djangoform表单Ajax控制跳转
原文地址：https://www.cnblogs.com/li1992/p/9244900.html