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>

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

时间: 2024-10-10 15:58:45

Djangoform表单Ajax控制跳转的相关文章

【JEECG技术博文】简单实例讲解JEECG ONLINE表单权限控制(jeecg3 6)

简单实例讲解JEECG ONLINE表单权限控制(jeecg3.6) 原       文:http://blog.itpub.net/30066956/viewspace-1872409/ 相关博文:http://blog.itpub.net/30066956/viewspace-1868754/ 作       者: 许国杰 一.业务背景 某公司要实现一个日志系统,用来了解员工的工作量饱和情况. 二.需求 1.角色分为:员工.经理两种. 2.员工每天在日志系统中填报工作总结,然后经理进行点评.

Form表单Ajax系列化提交数据

页面上有一个商品的颜色尺码二维输入框,输入完毕之后需要把数据进行提交,点击立即购买则进行页面的跳转,通过form表单将数据提交到后台,而点击添加到购物车的话,则会通过ajax进行数据的提交,页面不进行跳转.前台样式: 下面是form表单: <form id="cartForm" action="${ctx}/cart/save" method="post"> <div class="product-page-optio

form表单提交图片禁止跳转

问题: 最近在做项目时,遇到上传图片需求,且在不跳转的情况下获取到返回信息 思路: 1.  使用ajax发送异步请求,经多次测试,最终以失败告终 2. iframe 禁止跳转(未尝试) 3. 修改form标签内提交请求逻辑 实现:(思路3) 1. html代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <me

细说 Form (表单)- Ajax的方式

简单的表单,简单的处理方式 好了,让我们进入今天的主题,看看下面这个简单的HTML表单. <form action="Handler1.ashx" method="post" > <p>客户名称: <input type="text" name="CustomerName" style="width: 300px" /></p> <p>客户电话:

Django-Form表单(验证、定制、错误信息、Select)

Django form 流程 1.创建类,继承form.Form 2.页面根据类的对象自动创建html标签 3.提交,request.POST 封装到类的对象里,obj=UserInfo(request.POST) 4.用户输入是否合法 obj.is_valid() 5.全部合法,获取全部内容 obj.clean() 6.只有有不合法 obj.errors 首先关闭跨站请求 #'django.middleware.csrf.CsrfViewMiddleware', 有错误会阻止提交,并提示错误信

验证插件validate 表单ajax提交验证问题

1.按钮类型type="submit" 2.form的action不能写,否则默认就提交表单了,不会再执行ajax 3.ajax方法写在submitHandler方法里面 例如: validate设置默认参数: /* * 表单验证 * */if($('.form-validate').length > 0) { jQuery.validator.setDefaults({ ignore: "", errorElement:'span', errorClass:

jquery 常用的表单元素控制

判断radio是否选中并取得选中的值 One: $("input[name='items']:checked").val(); Two: function checkradio(){ var item = $(":radio:checked"); var len=item.length; if(len>0){ alert("yes--选中的值为:"+$(":radio:checked").val()); } } jque

js表单验证控制代码大全

http://www.cnblogs.com/SAL2928/archive/2008/10/24/1319020.html目录: 1:js 字符串长度限制.判断字符长度.js限制输入.限制不能输入.textarea 长度限制 2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判断是否输入英文.只能输入英文 4:js只能输入数字,判断数字.验证数字.检测数字.判断是否为数字.只能输入数字 5:只能输入英文字符和数字 6: js email验证 .js 判断email .信箱/邮箱格式验证

PHP表单ajax和日期函数

表单提交: 前端: form提交方式两种:post,get; 文件上传 <input type=”file”>-->enctype="multipart/form-data"; 验证:onsubmit=”return sub();” 后端(php): 接受数据:$_POST; $_GET; $_REQUEST; $_FILE 文件上传 判断:文件类型:文件大小:修改文件存储的名称(防止文件名冲突): move_uploaded_file($temp,$url) enc