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>

Form组件，用ajax发送到后台需要的注意事项

猜你喜欢