Djangoform表单Ajax控制跳转

需求:

  1:在登陆页面输入账号密码后,ajax异步提交数据给后端验证。文章地址https://www.yii666.com/article/758230.html网址:yii666.com<文章来源地址:https://www.yii666.com/article/758230.html

  2:验证通过后,后端指定跳转页面,并把页面封装进返回的Json数据中,由ajax控制from表单跳转到目标页面

一:登陆页面HTML代码

  页面的跳转主要通过ajax控制form表单的action动作完成。因此如果action属性有url,那么后端不指定跳转页面的话,会默认跳转此页面,下面代码中,默认跳转到home页面

  另外需要注意的是:利用submit()跳转页面,点击的按钮的type是button(网上还有其他跳转方法,但是我没有实现过,目前就这种方法成功完成过form表单下ajax控制跳转)文章来源地址https://www.yii666.com/article/758230.html

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

Ajax跳转页面,可以不用form表单包裹input框,直接用div标签包裹就可以。然后,提交数据的绑定按钮其类型必须是type=button,一定要写完整。另外ajax提交数据需要携带csrf-token,写在form表单中是没有效果的。网址:yii666.com

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png