javascript - jQuery .ajax() 请求未触发

Question

我正在尝试对我的网络服务器进行 AJAX 调用以提取有关城市的信息。

• 我在页面上有一个选择下拉菜单，填充了 3 个值:[空白]、“纽约州纽约”和“密歇根州安娜堡”
• 当一个项目被选中时，城市的名字被重新格式化:空格变成“-”
• 然后 .ajax()被触发到“/data/[city]”
• 当服务器响应时，它调用alert()使用它检索到的 JSON 对象。

代码:

$( 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);
      });
    }
  });
});

出于某种原因，.ajax()电话有时会拒绝开火。 url 时永远不会发出传出 HTTP 请求等于:

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

然而，它在 url 时成功触发等于:

• /data/cities/New-York-NY (没有逗号)
• /data/cities/New-York,NY (没有破折号)
• /data/cities/New-York,-NYC (附加字符)
• /data/cities/Ann-Arbor,-MI (类似格式)

我已经验证:

• 浏览器在“失败”时不会发出任何传出 HTTP 请求(通过 Chromium 的“网络”选项卡进行检查)
• Web 服务器接收除这个有问题的 URL 之外的所有 URL 的 HTTP 请求
• 页面上没有 Javascript 错误

我是否遗漏了一些明显的东西？这似乎真的很奇怪 .ajax()不会为这个特定的 URL 触发...

编辑:

向 .ajax() 添加了错误回调要求。它失败并出现错误 state = "rejected"和 statusText = "error"。

根据要求，<select>页面上的标记:

<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>

Answer 1

默认情况下，除非您使用 $.ajaxSetup 作为默认设置，否则您不会向我们展示，您使用的是 GET 方法。由于您没有为缓存指定显式值，并且根据 jquery 规范 (api.jquery.com/jQuery.ajax)，其默认值为 true，因此您的浏览器可能仍在使用较早的(缓存的)响应(即使您在浏览器中看到的源代码是最新的)。我建议使用 POST(如果您愿意并且服务器允许)和/或在 $.ajax({...}) 调用中明确指定 cache: false，以排除任何有趣的事情。

(应提问者的要求从我的评论中复制/粘贴)