Djangoform表单Ajax控制跳转

需求：

　　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>

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