AJAX 请求不起作用

ajax request is not working

本文关键字：不起作用 请求 AJAX      更新时间：2023-09-26

我正在使用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。这是问题的根源吗？我无法理解，自动完成本身的请求 url 不正确。那么这个 Django 服务器代码怎么会导致问题呢？

谁能告诉我我犯了什么错误？谢谢！

尝试为传出数据指定一个类型，并对其进行一些手动操作：

$("#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 将告诉服务器会发生什么。

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

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

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

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

$("#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 关键字"...

2.） ...以便当用户开始键入时，执行 ajax 调用

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

我认为这对你有用。 让我知道它是怎么回事。

相关文章：