$ .ajax（）成功不会运行函数

Question

My question regards the $.ajax() jQuery method. I can't get the success parameter in $.ajax() to work.

This works:

$.ajax({
    type: 'POST',
    url: "/getCodes.php?codes=billingCodes&parent="+$('#wClient').val(),
    dataType: 'json',
    success: window.alert("inside aJax statement")

});

This does not:

 $.ajax({
    type: 'POST',
    url: "/getCodes.php?codes=billingCodes&parent="+$('#wClient').val(),
    dataType: 'json',
    success: function(){
        window.alert("inside aJax statement");
    }                       
}); 

In the first case, I get a JavaScript alert window that lets me know the $.ajax() I called is working. All that is changed in the second block of code is I put the window.alert() inside a function() { window.alert(); } function() { window.alert(); } .

The point of this is to verify that the $.ajax is running so I can put some actual useful code in the function(){} when the $.ajax runs successfully.

Answer 1

In your second example nothing will happen unless you get a successful call back from the server. Add an error callback as many here have suggested to see that indeed the ajax request is working but the server is not currently sending a valid response.

$.ajax({
        type: "POST",
        url: "/getCodes.php?codes=billingCodes&parent="+$('#wClient').val(),                        
        dataType:"json",
        success: function(response){
                alert(response);        
      },
      error: function(jqXHR, textStatus, errorThrown){
          alert('error');
      }         
      });

helpful Link in tracking down errors.

Answer 2

Your first example does nothing whatsoever to prove that the ajax call has worked. All it does is prove that the ajax function was reached , because the values of the properties in the anonymous object you're passing into the ajax function are evaluated before the function is called.

Your first example is basically the same as this:

// THIS IS NOT A CORRECTION, IT'S AN ILLUSTRATION OF WHY THE FIRST EXAMPLE
// FROM THE OP IS WRONG
var alertResult = window.alert("inside aJax statement");
$.ajax({
    type: 'POST',
    url: "/getCodes.php?codes=billingCodes&parent=" + $('#wClient').val(),
    dataType: 'json',
    success: alertResult

})

Eg, first the alert is called and displayed, then the ajax call occurs with success referencing the return value from alert (which is probably undefined ).

Your second example is correct. If you're not seeing the alert in your second example, it means that the ajax call is not completing successfully. Add an error callback to see why.

Answer 3

You may want to try and use a promise:

var promise = $.ajax({
  type: 'POST',
  url: "/getCodes.php?codes=billingCodes&parent="+$('#wClient').val(),
  dataType: 'json'
});

promise.fail( function() {
  window.alert("Fail!");
});

promise.done( function() {
  window.alert("Success!");
});

What this does is saves the ajax call to a variable, and then assigns additional functionality for each of the return states. Make sure that the data type you are returning is actually json, though, or you may see strange behavior!

Note that js is single-threaded; the reason your first example works is because it actually executes the code next 'success' and stores the result. In this case there is nothing to store; it just pops an alert window. That means that the ajax call is leaving the client after the alert is fired: use the developer tools on Chrome or equivalent to see this.

By putting a function there, you assign it to do something when the ajax call returns much later in the thread (or, more precisely, in a new thread started when the response comes back).

Answer 4

在第一种情况下，当你运行$ .ajax时，window.alert会立即执行。第二种情况，它只在你收到服务器的答案时运行，所以我怀疑你的ajax请求有问题

Answer 5

I think that you do it right, but your request does not succeeds. Try add also error handler:

error: function(){alert("Error");};

I guess that dataType does not match or something like that.

Answer 6

It is 100% your second example is correct. Why it does nothing? Maybe because there is no success in the ajax call. Add "error" handler and check waht does your ajax call return with the browsers' developer tool -> Network -> XHR . This really helps in handling of broken / incorrect ajax requests