javascript - jQuery .ajax() request not firing - Stack Overflow

admin管理员组

文章数量:1329105

I'm trying to make an AJAX call to my web server to pull down information about a city.

• I have a select drop down on the page, populated with 3 values: [blank], "New York, NY", and "Ann Arbor, MI"
• When an item is selected, the city's name is reformatted: spaces are turned into '-'
• Then .ajax() is fired to "/data/[city]"
• When the server responds, it calls alert() with a JSON object it retrieved.

Code:

$( document ).ready(function() {
  $('#city').change(function () {
    var city = $.trim($(this).val()).replace(/ /g,"-");
    if(city.length > 0)
    {
      var url = "/data/cities/" + city;
      $.ajax({
        url: url,
        context: document.body,
        dataType: 'json'
      }).done(function(data) {
        alert(data);
      });
    }
  });
});

For some reason, the .ajax() call refuses to fire on occasion. The outgoing HTTP request is never made when url equals:

• /data/cities/New-York,-NY

However, it fires successfully when url equals:

• /data/cities/New-York-NY (no ma)
• /data/cities/New-York,NY (no dash)
• /data/cities/New-York,-NYC (additional character)
• /data/cities/Ann-Arbor,-MI (similar format)

I have verified:

• The browser makes no outgoing HTTP request when it 'fails' (as checked via Chromium's Network tab)
• The web server receives the HTTP requests for all the URLs except this problematic one
• There are no Javascript errors on the page

Am I missing something obvious? This seems really weird that .ajax() wouldn't fire for this one specific URL...

EDIT:

Added an error callback to the .ajax() request. It is failing with an error of state = "rejected" and statusText = "error".

As requested, the <select> tag on the page:

<select id="city">
  <option value=""></option>
  <option value="New York, NY">New York, NY</option>
  <option value="Ann Arbor, MI">Ann Arbor, MI</option>
</select>

I'm trying to make an AJAX call to my web server to pull down information about a city.

• I have a select drop down on the page, populated with 3 values: [blank], "New York, NY", and "Ann Arbor, MI"
• When an item is selected, the city's name is reformatted: spaces are turned into '-'
• Then .ajax() is fired to "/data/[city]"
• When the server responds, it calls alert() with a JSON object it retrieved.

Code:

$( document ).ready(function() {
  $('#city').change(function () {
    var city = $.trim($(this).val()).replace(/ /g,"-");
    if(city.length > 0)
    {
      var url = "/data/cities/" + city;
      $.ajax({
        url: url,
        context: document.body,
        dataType: 'json'
      }).done(function(data) {
        alert(data);
      });
    }
  });
});

For some reason, the .ajax() call refuses to fire on occasion. The outgoing HTTP request is never made when url equals:

• /data/cities/New-York,-NY

However, it fires successfully when url equals:

• /data/cities/New-York-NY (no ma)
• /data/cities/New-York,NY (no dash)
• /data/cities/New-York,-NYC (additional character)
• /data/cities/Ann-Arbor,-MI (similar format)

I have verified:

• The browser makes no outgoing HTTP request when it 'fails' (as checked via Chromium's Network tab)
• The web server receives the HTTP requests for all the URLs except this problematic one
• There are no Javascript errors on the page

Am I missing something obvious? This seems really weird that .ajax() wouldn't fire for this one specific URL...

EDIT:

Added an error callback to the .ajax() request. It is failing with an error of state = "rejected" and statusText = "error".

As requested, the <select> tag on the page:

<select id="city">
  <option value=""></option>
  <option value="New York, NY">New York, NY</option>
  <option value="Ann Arbor, MI">Ann Arbor, MI</option>
</select>

• javascript
• jquery
• ajax

Share Improve this question Follow edited Aug 3, 2013 at 21:12 David Elner asked Aug 3, 2013 at 20:47 David ElnerDavid Elner 5,20166 gold badges3535 silver badges4949 bronze badges 17

• Did you try to console.log(city)? What's it value after replace? – u_mulder Commented Aug 3, 2013 at 20:51
• 2 Btw, if current selected option is NY and you choosed NY again - change event won't be fired. Maybe it is the reason? – u_mulder Commented Aug 3, 2013 at 20:55
• 1 @GreatBigBore The error callback is being invoked by .ajax(), giving me state = 'rejected' and statusText = 'error'... having trouble digging up details why it failed. – David Elner Commented Aug 3, 2013 at 21:07
• 1 @Dave I created a fiddle jsfiddle/N98Kz It works as expected, ajax calls were triggered without problem. – zs2020 Commented Aug 3, 2013 at 21:08
• 2 By default, unless you used $.ajaxSetup for default settings you're not showing us, you're using the GET method. As you're not specifying an explicit value for cache, and its default value is true according to jquery spec (api.jquery./jQuery.ajax), your browser might still be working with an earlier (cached) response (even if the source code you see in the browser is up-to-date). I'd suggest using POST (if you an and if the server allows) and/or specifying cache: false explicity in the $.ajax({...}) call, just to rule any funny stuff out. – UweB Commented Aug 3, 2013 at 21:30

 |  Show 12 more ments

1 Answer 1

Sorted by: Reset to default 4

By default, unless you used $.ajaxSetup for default settings you're not showing us, you're using the GET method. As you're not specifying an explicit value for cache, and its default value is true according to jquery spec (api.jquery./jQuery.ajax), your browser might still be working with an earlier (cached) response (even if the source code you see in the browser is up-to-date). I'd suggest using POST (if you an and if the server allows) and/or specifying cache: false explicity in the $.ajax({...}) call, just to rule any funny stuff out.

(copy/pasted from my ment as requested by the asker of the question)

本文标签： javascriptjQuery ajax() request not firingStack Overflow