zoukankan      html  css  js  c++  java
  • Form组件,用ajax发送到后台需要的注意事项

    form通过ajax发送到后台,

    后台无法直接返回跳转页面,因为,ajax无法接受跳转命令

    后台验证完成后,错误信息因为不是常规Python的字典格式,所以需要引入ErrorDict

    views文件

    import json
    
    def ajax(request):
        if request.method =="GET":
            obj=AjaxForm()
            return render(request,'ajax.html',{"obj":obj})
        else:
            ret={"status":"dd",'message':None}
            obj=AjaxForm(request.POST)
            if obj.is_valid():
                print(obj.cleaned_data)
                ret['status']='money'
                return HttpResponse(json.dumps(ret))
            else:
                print(obj.errors)
                from django.forms.utils import ErrorDict   #因为判断后的错误信息不是Python常规数据类型,所以需要继承ErrorDict
                ret['message']=obj.errors
                return HttpResponse(json.dumps(ret))

    html文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <form action="" method="post" novalidate id="formData">
        {% csrf_token %}
    
        {{   obj.as_p }}
        <input type="button" value="提交" id="btn">
    </form>
    
    <script src="/static/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {
                $.ajax({
                    url:'/ajax/',
                    type:'post',
                    data:$('#formData').serialize(),
                    dataTypr:"JSON",
                    success:function (arg) {
                        //arg:状态,错误信息
                        if (arg.status == 'money'){
                            window.location.href='http://www.baidu.com'
                        }
    
                        console.log(arg);
                    }
                })
            })
        })
    
    
    </script>
    </body>
    </html>
  • 相关阅读:
    事务与隔离级别
    使用 Spring Boot 构建 RESTful API
    Dockerfile 指令详解
    Java 函数式编程--流操作
    Java ThreadLocal 的使用与源码解析
    node+express的html页面访问
    node+mysql数据库连接(入门)
    ensp的基础路由命令,接口,下一跳的配置,入门必备
    初识JSP/Severlet技术开发Web应用
    jQuery基础及选择器
  • 原文地址:https://www.cnblogs.com/lhqlhq/p/9184178.html
Copyright © 2011-2022 走看看