Как я могу отобразить ошибку, представленную JSON через AJAX?

Question

Я пытаюсь отправить форму через AJAX на django. Соответствующий код ajax: _

<script>
$(document).ready(function(){
$('#form1').submit(function(){
    console.log('form is submitted');

    var csrftoken = $("[name=csrfmiddlewaretoken]").val();

    var formdata={
        'username':$('input[name=user]').val(),
        'email':$('input[name=email]').val(),
        'password1':$('input[name=password]').val(),
        'password2':$('input[name=password1]').val(),
    };
    console.log("Formvalue is taken");

    $.ajax({
        type:'POST',
        url:'/Submit/signingup',
        data:formdata,
        dataType:'json',
        encode:true,
        headers:{
        "X-CSRFToken": csrftoken
        },
    })

    .done(function(data){
        console.log(data);
        if(!data.success){//we will handle error
            console.log(data.errors);
            if (data.errors.email){

                $('#user-group').append('<div class="warning>'+data.errors.email+'</div>');
            }
            if(data.errors.username){
                $('#email-group').append('<div class="warning>'+data.errors.username+'</div>');
            }
        }
            else{
                //all good
            }

    });


    event.preventDefault();
});
});

Сообщение об ошибке Json, возвращаемое сервером: Как я могу представить ошибки в HTML? Я хочу, чтобы каждая ошибка придерживалась соответствующих им элементов div?

Answer 1

Вы можете сделать следующее

  if (data.errors){
        for (let key in data.errors) {
                        $('#' + data.errors[key][0] + '-error').text(data.errors[key][1]);  // key in your case is email,password2
                    }
                return false;
}

В HTML

<div class="form-group">
                <label for="name">Name*</label>
                <input class="form-control" id="name" required="required" name="name" type="text" value="">
                <span class="error" id="name-error"></span>
            </div>
            <div class="form-group">
                <label for="contact-email">Email*</label>
                <input class="form-control" id="email" required="required" name="email" type="text" value="">
                <span class="error" id="email-error"></span>  // here id is email-error so you must must email key in error return by server.
            </div>

В этом случае помните, что идентификатор в span и ключ в ошибке на стороне сервера должны совпадать. Надеюсь, это поможет.

Answer 2

Вы можете использовать проверку на стороне клиента, чтобы убедиться, что введены правильные данные.