jQuery .ajax() 请求未触发

Question

我正在尝试对我的 Web 服务器进行 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 的 HTTP 请求，除了这个有问题的 URL
• 页面上没有 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 ，只是为了排除任何有趣的东西。

（根据问题提出者的要求复制/粘贴我的评论）