如何在Jquery Ajax表单提交中添加错误处理

Question

This is my code

<script type="text/javascript">
$(document).ready(function() {
    $('#spc-comment-flag-form').submit(function() {
        $.ajax({
            data: $(this).serialize(),
            type: $(this).attr('method'),
            url: $(this).attr('action'), 
            success: function(data) {
                if( data['error'] == false) {
                    var msg = 'We got your flag. Our moderators will now look into it. You may close the window now!';
                    $('#spc-comment-flag-response').html(msg);
                }
                else {
                    $('#spc-comment-flag-response').html(data);
                }   
            },
        });
        return false;
    });
});
</script>

edit

on server side its something like this:

@csrf_protect
@login_required
def flag(request, comment_id, next=None):
    if not request.is_ajax():
        raise Http404
    data = {}
    if request.method == 'POST':
        ...
        data = simplejson.dumps(data)
        return HttpResponse(data, mimetype="application/javascript")
    else:
        raise Http404

I am basically server side guy and seldom have to write JS. I sent "error" : true if there is an error with error message and "error" : false if no error on server!

I don't know why in the above code the conditional logic is not working!! Can anyone help me fix it?

Answer 1

try this one...

$(document).ready(function() {
        $('#spc-comment-flag-form').submit(function() {
            $.ajax({
                data: $(this).serialize(),
                type: $(this).attr('method'),
                url: $(this).attr('action'), 
                success: function(data) {
                    if( data['error'] == false) {
                        var msg = 'We got your flag. Our moderators will now look into it. You may close the window now!';
                        $('#spc-comment-flag-response').html(msg);
                    }
                    else {
                        $('#spc-comment-flag-response').html(data);
                    }   
                },
                error: function (data) {
                       var r = jQuery.parseJSON(data.responseText);
                       alert("Message: " + r.Message);
                       alert("StackTrace: " + r.StackTrace);
                       alert("ExceptionType: " + r.ExceptionType);
                }
            });
            return false;
        });
    });

Answer 2

You may use this code.. if you want to handle the error in web request ...

http://api.jquery.com/jQuery.ajax/

$.ajax({

}).done(function (data) {

}).fail(function (jqXHR, textStatus) {

});

And about in your server side validation you could return the error using json ...

Answer 3

you have to use

error: function( jqXHR jqXHR, String textStatus, String errorThrown){
   ...
   ...
}

full documentation

Answer 4

  success: function(data)
  {
    if(data.error){
       //alert error
    }
    else{
       //alert('Success');
    }
  },
  error: function(XMLHttpRequest, textStatus, errorThrown)
  {
     alert('Internal server error');
     //some stuff on failure
  }

This error callback also handles the error, which are not caught at the server side.