$ .ajax（）成功调用，但不会运行方法

Question

This is really puzzling me. Any idea why this would be happening?

This code does work:

 $.ajax({
            type: 'GET',
            dataType: 'json',
            url: 'http://localhost:3235/Users/searchUsers?callback=?&searchString=' + searchString,
            success: alert("Success")
        });

This code does not:

 $.ajax({
            type: 'GET',
            dataType: 'json',
            url: 'http://localhost:3235/Users/searchUsers?callback=?&searchString=' + searchString,
            success: function(data){
              alert("Success");
            }
        });

Answer 1

The first snippet is bad syntax and shouldn't be used, you get the alert because it is called immediately, not on success.

There are only two reasons for you to not get the alert with the 2nd snippet.

1. the server isn't returning a success status code, for example, it's either 404, 500, etc, not 200.
2. The only other possibility is the jsonp being returned either isn't jsonp, or isn't valid jsonp.

Most likely you are confusing JSONP with JSON, so i'll give you an example of each. First is json:

{"foo":"bar"}

and this is JSONP ...?callback=somecallbackname&... :

somecallbackname({"foo":"bar"})

Note, somecallbackname will be supplied by jQuery, you'll have to get the value of the callback get parameter and use it to generate the JSONP accordingly.

Answer 2

The first one "works" because of a bug in your code. It is calling the alert and storing what it returns in the success callback.

Add an error handler to see what the actual problem is.

 $.ajax({
            type: 'GET',
            dataType: 'json',
            url: 'http://localhost:3235/Users/searchUsers?callback=?&searchString=' + searchString,
            success: function(data){
              alert("Success");
            },
            error: function (xhr, status, msg) {
              console.log(status, msg);
            }
        }); 

If you can not get the error handler to fire. Look at the net tab on the JavaScript console, and look at the http request. You will see the error that the server returns.

Answer 3

The alert you're getting from your first code snippet is misleading.

When alert("Success") is assigned to the success property your actually immediately calling it.

You're second approach is the one you want.

Answer 4

The first example is wrong - the result of alert("Success") is assigned as the callback, not a function.

Your second example is closer, but you are mixing up JSON and JSONP. If your service is returning JSON, you should remove callback=? from your request url (actually, you can remove this regardless, setting dataType:'jsonp' will add it automatically).

var ajax_url = 'http://example.com:3235/Users/searchUsers?searchString=' + searchString;

$.ajax({
    type: 'GET',
    dataType: 'json',
    url: ajax_url,
    success: function(data){
        alert("Success");
    },
    error: function(xhr, status, error){
        alert("Error: " + status + " " + error);
    },
    complete: function(xhr, status){
        alert("Complete: " + status);
    }
});