码迷,mamicode.com
首页 > Web开发 > 详细

Djangoform表单Ajax控制跳转

时间:2018-06-29 19:27:38      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:因此   group   stat   lang   fun   原因   错误   sub   label   

需求:

  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控制跳转

标签:因此   group   stat   lang   fun   原因   错误   sub   label   

原文地址:https://www.cnblogs.com/li1992/p/9244900.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!