Question

我正在尝试通过Django上的AJAX提交表单。相应的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>

在这种情况下，请记住跨度中的id和服务器端错误中的key应该匹配。我希望这会有所帮助。

Answer 2

您可以使用客户端验证来确保输入正确的数据。

如何通过Ajax显示json所代表的错误？

2 个答案: