zoukankan      html  css  js  c++  java
  • 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表单中是没有效果的。


  • 相关阅读:
    Java通过Mybatis实现批量插入数据到Oracle中
    SpringMVC+Spring+Mybatis整合,使用druid连接池,声明式事务,maven配置
    图片懒加载原理
    js参考---sort函数
    css参考---纯css实现三角形
    css参考---实现元素水平垂直居中
    javascript疑难问题---13、函数防抖
    javascript疑难问题---12、函数节流
    闭包执行注意(函数节流为例)
    javascript疑难问题---11、回调函数
  • 原文地址:https://www.cnblogs.com/li1992/p/9244900.html
Copyright © 2011-2022 走看看