Ajax返回未定义

Question

I'm trying to upload a image to my server using a POST form and AJAX. But everytime I submit the form, my AJAX returns an undefined in my error box. This is the Ajax function I'm talking about:

$('.register_submit').click(function(e){
  e.preventDefault();

  $.ajax({
      type: "POST",
      url: "./functions/register.php",
      data: new FormData(this),
      contentType: false,
      processData: false,
       success : function(data){
          if (data.code == "200"){
              window.location.replace("./?page=home");
          } else {
              $(".display-error").html("<ul>"+data.msg+"</ul>");
              $(".display-error").css("display","block");
          }
      }
  });


});

and my form:

<form class="addCar_form" data-toggle="validator"  method="post" enctype="multipart/form-data" >
   <input type="file" class="form-control productimages" id="images" name="images[]" onchange="preview_images();" multiple/>
   <input type="submit" name="addCar_submit" value="Auto toevoegen" class="btn btn-default button addCar_submit">
</form>

Please do not mark this question as a duplicate, as I've been reading about ajax and it being asynchronous in other topics but I'm really not getting it from these answers. Anyone who sees what I'm doing wrong?

Answer 1

The click handler for $(".register_submit") would be targeting the button; then the button is passed in through FormData(this) . FormData should instead contain a reference to the form...

Also, I don't see a register_submit class definition on the form in this example, so maybe it's getting overlooked?

In your PHP page, can you trace through it to see what form data is being passed? That is helpful to track down these kinds of problems, by evaluating the form posted data.

Answer 2

I think your server returns an error with a different status code. Therefor the success callback might not be called.

There are different callback available for $.ajax I think error is the one you need to check.

From the docs :

error callback option is invoked, if the request fails. It receives the jqXHR, a string indicating the error type, and an exception object if applicable. Some built-in errors will provide a string as the exception object: "abort", "timeout", "No Transport".

Try:

$('.register_submit').click(function (e) {
    e.preventDefault();

    $.ajax({
        type: "POST",
        url: "./functions/register.php",
        data: new FormData(this),
        contentType: false,
        processData: false,
        success: function (data) {
            if (data.code == "200") {
                window.location.replace("./?page=home");
            } else {
                $(".display-error").html("<ul>" + data.msg + "</ul>");
                $(".display-error").css("display", "block");
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
          alert(thrownError);
        }
    });
});