2

我正在使用 jQuery 自动完成http://jqueryui.com/demos/autocomplete/#remote-jsonp ajax 请求不起作用（不向指定的 url 发送请求）

这是jQuery代码：

$("#add-keywords").autocomplete({
    source: function( request, response ) {
        var q = $("#add-keywords").val();
        $.ajax({
            url: "/keywords_suggestions/",
            dataType: "json",
            data: {
                    query: q
            }
        });
    },
    minLength: 2,
    select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
    }
});

请求的 url 应该是这个http://127.0.0.1:8000/keywords_suggestions/，但它正在发送到http://127.0.0.1:8000/information/?query=web（在这个页面上实现了 jquery 自动完成功能http://127.0.0.1:8000/information/）

更新-1

我在浏览器中检查了 /keywords_suggestions/ 页面，它显示Django 服务器代码没有返回 HttpResponse。这是问题的根源吗？我不明白，自动完成本身的请求网址不正确。那么这个 Django 服务器代码怎么会导致问题呢？

谁能告诉我我犯的错误？谢谢！

4

3 回答 3

0 
$("#add-keywords").autocomplete({
    source: function( request, response ) {
        var q = $("#add-keywords").val();
        $.ajax({
            url: "/keywords_suggestions/",
            dataType: "json",
            data: {
                    query: q
            },
            success: function(data) {
                // do something here with the returned data
                console.log(data);
            }
        });
    },
    minLength: 2,
    select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
    }
});

如上所述，您需要在传递给 $.ajax 调用的数据对象中定义一个“成功”回调函数，该函数告诉 jQuery 在数据返回后如何处理数据。

当然，你可能不得不考虑重构——AJAX 请求默认异步执行，这意味着浏览器在等待服务器从 AJAX 调用返回数据时，会继续执行剩余的 Javascript 代码。在这种情况下，调用“自动完成”函数可能发生在数据从服务器返回之前——这不好！

因此，如果我没记错的话，您将不得不将此 JS 重构为：

1.）将“更改”事件绑定到“#add-keywords”......

2.) ...这样当用户开始输入时，就会执行 ajax 调用

3.) 然后，在成功返回该数据后，执行自动完成调用，您试图将 ajax 调用填充到现在的状态。

我认为这对你有用。让我知道事情的后续。

于 2012-06-11T15:11:01.527 回答
0

尝试给传出数据一个类型和一些手动操作：

$("#add-keywords").autocomplete({
    source: function(request, response) {
        var q = $("#add-keywords").val();
        var pString = '{"query":"' + q + '"}';

        $.ajax({
            url: "/keywords_suggestions/",
            dataType: "json",
            data: pString,
            contentType: "application/json",
            success: function(data) {
                response(data);
            }
        });
    },
    minLength: 2,
    select: function(event, ui) {
        log(ui.item ? "Selected: " + 
        ui.item.label : "Nothing selected, input was " + 
         this.value);
    }
});

contentType 将告诉服务器会发生什么。

于 2012-06-11T15:19:07.477 回答
0

似乎这里有两个潜在的问题：

  1. 正如您所说，Ajax 请求被发送到 /Information/。我建议您将url设置为“http://localhost:8000/keywords_suggestions/”。我不建议以这种方式保留它，而只是看看您是否可以将请求发送到正确的位置。

  2. 自动完成插件将“ term =theSearchTerm”作为 GET 参数发送，而不是查询。您是否对插件代码进行了任何更改以查找query？

此外，您的 /keywords_suggestions/ 中会发生什么？

于 2012-06-11T15:16:01.317 回答