基於Ajax提交formdata數據

失敗的時候的錯誤信息（什麽都不輸入直接提交）

基於Ajax在註冊頁面顯示錯誤信息

register.html

//基於Ajax提交數據
    $(".reg_btn").click(function () {
        console.log($("#form").serializeArray());
        var formdata = new FormData();   //對下面註釋的內容進行優化版
        var request_data = $("#form").serializeArray();
        $.each(request_data, function (index, data) {
            formdata.append(data.name,data.value)
        });
        formdata.append(
 
"avatar", $("#avatar")[0].files[0]);

{#        var formdata = new FormData();   //Ajax上傳文件一定要換成FormData的格式，構建一個對象傳到這裏邊#}
{#        formdata.append("user",$("#id_user").val()); //傳過去的鍵和值#}
{#        formdata.append("pwd",$("#id_pwd").val());#}
{#        formdata.append("re_pwd",$("#id_re_pwd").val());#}
 

{#        formdata.append("email", $("#id_email").val());#}
{#        formdata.append("avatar", $("#avatar")[0].files[0]);#}
{#        formdata.append("csrfmiddlewaretoken", $("[name = ‘csrfmiddlewaretoken‘]").val());#}
        $.ajax({
            url:"",
            type:"post",
            contentType:false,  
 
//要加兩個參數不然會報錯；數據的編碼類型
            processData:false, //只要是formdata都要加這兩個參數
            data: formdata,
            success: function (data) {
                console.log(data);
                if(data.user){
                    //註冊成功
                }
                else{//註冊失敗
                    //console.log(data.msg)
                    $("span.error").html(""); //清空錯誤信息
                    $(".form-group").removeClass("has-error");
                    //展示此次提交的錯誤信息
                    $.each(data.msg, function(field, error_list){
                        console.log(field, error_list);
                        $("#id_"+field).next().html(error_list[0]);  //每次循環都把各自的信息放到input那下面了
                        $("#id_"+field).parent().addClass("has-error");
                    })

                }
            }
        })
    })

views.py

def register(request):
    if request.is_ajax():  #你點擊那個按鈕即使Ajax請求又是post請求。既可以用Ajax也可用method=post作分支判斷
        print(request.POST) #把所有提交的數據都取出來
        form = UserForm(request.POST)  #用UserForm做檢驗，
        response = {"user":None, "msg":None} #發Ajax一般都會返回一個字典來進行標示這些行為
        if form.is_valid():  #數據全通過,成功
            response["user"] = form.cleaned_data.get("user") #註冊人的名字
        else:
            print(form.cleaned_data)  #幹凈數據
            print(form.errors)        #錯誤數據
            response["msg"] = form.errors  #失敗了之後把這所有的錯誤信息放到msg裏邊
        return JsonResponse(response)
    form = UserForm()
    return render(request,"register.html", {"form":form})

1.4 博客系統| 基於Ajax提交數據