javascript - 将 URL 中的 '?' 传递给 ajax 调用时出现问题

Question

我正在尝试创建对weatherunderground 的Ajax 调用。 代码是:

$(".city").autocomplete({
    source: function( request, response ) {
    $.ajax({
        // GET http://autocomplete.wunderground.com/aq?query=San%20F
        url: "http://autocomplete.wunderground.com/aq?query=",
        dataType: "jsonp",
        data: {
            featureClass: "P",
            style: "full",
            maxRows: 12,
            name_startsWith: request.term
        },
        success: function( data ) {
            response( $.map( data.RESULTS, function( item ) {
            return {
                label: item.name + item.countryName,
                value: item.name
            };
        }));
     }
 });
},
minLength: 2,
select: function( event, ui ) {
   log( ui.item ?
      "Selected: " + ui.item.label :
       "Nothing selected, input was " + this.value);
 },
 open: function() {
    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
 },
 close: function() {
   $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
   }
 });

无论我如何处理 aq 后面的问号，我都会收到“未捕获的语法错误:意外的标记:”错误。如果我编码？作为 '？'我明白了？在生成的 URL 中。如果我删除 & 符号，请求将正常运行。 如果我对整个字符串使用encodeURL() 或对？结果是 %3F，这也不起作用。

我准备撕掉我的头发，有人知道该怎么做吗？

Answer 1

该错误实际上源于参数名称不匹配，而不是 ?在 url .

有问题的参数是指定 JSONP 回调的参数:

http://.../aq?query=San%20F&callback=jQuery111___140___&ts=12345
//                          ^^^^^^^^

并且，jQuery 的默认名称 callback isn't what the API is expecting :

cb           JSONP callback method name

要更改参数，您可以包含 jsonp: 'cb'在请求选项中。

$.ajax({
    url: "http://autocomplete.wunderground.com/aq?query=San%20F",
    dataType: "jsonp",
    jsonp: 'cb',

    // ...
});

示例:http://jsfiddle.net/X2JEA/

<小时/>

并且，语法错误来自响应。没有cb参数，服务使用 JSON 进行响应，缺少“填充”以使其变为 JSONP。

{"RESULTS": ...}
//        ^ syntax error

jQuery111___140___({"RESULTS": ... });
// with padding

请注意，JSONP 实际上是 JavaScript，并通过 <script> 进行请求。元素。它只是利用了两种语言语法上的相似性。但是，它需要填充才有效。