AJAX request gives error and status "canceled"

Asked

Viewed 1,747 times

1

I have that code:

$("#go").click(function(){

    var email = $("#email").val();
    var password = $("#password").val();

    $.ajax({
        dataType:'html',
        type: 'post',
        data: 'email=' + email + '&password=' + password,
        url: 'login.php',
        success: function(data){
            alert(data);
        },
        error: function(data){
            alert("Error");
        }
    });
});

which generates the following request to the server: 

Request URL:http://localhost/Snotes/login.php
Request Headers CAUTION: Provisional headers are shown.
Accept:text/html, */*; q=0.01
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Origin:http://localhost
Referer:http://localhost/Snotes/index.php
User-Agent:Mozilla/5.0 (Windows NT 6.3) AppleWebKit/537.36 (KHTML, like Gecko)     Chrome/35.0.1916.153 Safari/537.36
X-Requested-With:XMLHttpRequest
Form Dataview sourceview URL encoded
email:123
password:123

The request url is correct and the data is correct, but the error function is always called, in the Chrome network tab it says the status is 'canceled', someone can help me with this error?

javascript jquery ajax

  • the error alert is executed? which returns in the login page.php?

  • if authentication has been done it returns the user id, otherwise it returns 0, the php script writes in the body of the page with 'echo' the quoted values

  • If you’re falling in the callback error is because it is giving error in php. You posted the request headers, check also the headers and the response content, the error will appear there.

  • In Sponse is talking 'Failed to load Response data', however when I use the Debugger and run until jQuery finishes the whole process, the request works(calls Success but the Answer tab still has the same failure message), and when not debugging it does not work(calls error).

  • Which code is giving?

  • 'Failed to load Response data is what appears in Response, with the 'complete' method I got an error status message where the error code is 0 and the error message is simply "error"

Show 1 more comment

1 answer

5


Ok problem solved, I had to add a parameter to the click callback and use the method .preventDefault() in the event, to prevent the default behavior of submitting the form.

Source: https://stackoverflow.com/questions/21796947/jquery-ajax-function-not-working.

I thank everyone who helped ;)

Solution code.

$("#go").click(function(e){

    e.preventDefault();

    var name = $("#name").val() + "%20" + $("#last_name").val();
    var email = $("#email").val();
    var password = $("#password").val();

    $.ajax({
        type: 'post',
        url:  'new.php',
        data: 'name=' + name + "&email=" + email + "&password=" + password,
        success: function(data){
            alert(data);
        },
        error: function(data){
            alert("Failed to send data to server!");
        }
    });

});

Browser other questions tagged javascript jquery ajax

You are not signed in. Login or sign up in order to post.