jQuery自动完成不向AJAX发送数据

Posted 2023-05-09

【中文标题】jQuery自动完成不向AJAX发送数据

【英文标题】：jQuery autocomplete not sending data to AJAX

【发布时间】：2018-02-16 06:23:49

【问题描述】：

我在使用 jQuery 自动完成时遇到了很糟糕的情况——HTTP 请求没有发生——根本没有数据传递给源。控制台没有关于任何错误的输出。

有人有想法吗？

作为记录 - AJAX URL/CSRF 密钥等是使用 $.ajaxSetup() 设置的，并且适用于所有其他 $.ajax() 调用。

感谢所有帮助。谢谢

$('.select_location_dropdown').autocomplete(
    source: function (request, response) 
        $.ajax(
        data: 
             action:'location_management',
             sub_ac:'get_location_list',
             query: request.term 
        ,
            success: function(data) 
                var transformed = $.map(data.search_response, function (el) 
                    return 
                        label: el.name
                    ;
                );
                response(transformed);
            ,
         )

    ,
    limit: 4,
    onAutocomplete: function(val) 
    ,
    minLength: 1,
);

【问题讨论】：

'error' 函数不抛出任何东西？我只看到你使用成功功能。也许你可以给我们一个完整的例子（包括 ajaxSetup）？

据我所知，这不是一个 ajax 错误——我已经将该函数包装在 if($('.select_location_dropdown.autocomplete').length) 中，以确保它确实知道它存在（它确实是因为我有它写入控制台）。我在 `source: function(x,y)' 之后添加了一个 console.log()，它只是没有被调用。

您的标头中有指向 jquery 脚本的链接吗？ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>，也看看这里并尝试这些看看它们是否可以工作cdnjs.com/libraries/jquery

是的。得到<script src="https://d1j0vcjilbbugt.cloudfront.net/_generic/js/jquery-latest.min.js"></script><script src="https://d1j0vcjilbbugt.cloudfront.net/_generic/js/jquery-ui.js"></script>。如果它不知道.autocomplete() 是什么，它会抛出一个错误

但是当您尝试通过复制和粘贴来访问这些链接时，您会收到一个错误...。改为添加 CDN，看看会发生什么

【参考方案1】：

您似乎还没有添加 ajax 调用的 url。 ajax 调用通常如下所示：

$.ajax(
    url: 'http://example.com',
    data: ,
);

【讨论】：

我的错。它会被浏览器阻止吗，比如因为 CORS？

不——我们正在通过 jsonp 运行请求。其余的都是成功的（我们在其上构建了一个完整的订单系统，这似乎很好。这里的问题似乎是没有数据被传递给source:function()，因为即使其中的console.log 也没有触发。奇怪

我试图在这里进行类似的设置：jsfiddle.net/maxuville/98ojmtLm 使用 jsonp 数据类型，它会产生一个错误并记录在控制台上，否则如果我删除 jsonp 数据类型，它会起作用。这可能是你身边发生的事情吗？

我们的没有产生任何错误 - 但这可能是由于 W3Schools 的 CORS 配置造成的吗？我正在考虑暂时摆脱 AJAX 并让 php 加载最流行的 300 个位置并将它们放入数组或类似的东西中。自动完成搜索不应该花这么长时间才能开始工作！

是的，很抱歉我帮不上忙。

【参考方案2】：

我认为这可能是因为自动完成对象末尾的额外逗号。

$('.select_location_dropdown').autocomplete(
    source: function (request, response) 
        $.ajax(
        data: 
             action:'location_management',
             sub_ac:'get_location_list',
             query: request.term 
        ,
            success: function(data) 
                var transformed = $.map(data.search_response, function (el) 
                    return 
                        label: el.name
                    ;
                );
                response(transformed);
            ,
         )

    ,
    limit: 4,
    onAutocomplete: function(val) 
    ,
    minLength: 1
);

minLength 不需要逗号，因为它是最后一个键值对。

【讨论】：

仍然没有 :( 仍然没有将数据发送到源函数

【参考方案3】：

对于那些想知道我是否曾经让这个工作的人，答案是否定的 - 无论如何都不适用于这个特定的用例。我现在将Dev Bridge jQuery Autocomplete plugin 用于其他交流用例。经过一番调整，我得到了它的工作正常。

我正在考虑使用 on(function()); 方法实现我自己的方法，但决定不这样做。

但是，对于这种特殊情况：

我使用的是Google Maps Places Autocomplete API，它更适合我们的需求，即使我们最终不得不为此付费，这是一种“必须”的情况。

下面是实现的代码。它立即起作用。

 function initAutocomplete() 
     try 
         autocomplete_from = new google.maps.places.Autocomplete(
             (document.getElementById('select_location_from')), 
                 types: []
             
         );

         autocomplete_to = new google.maps.places.Autocomplete(
             (document.getElementById('select_location_to')), 
                 types: []
             
         );

         autocomplete_to.addListener('place_changed', fillInAddress);
         autocomplete_from.addListener('place_changed', fillInAddress);
      catch (ex) 
 

 function fillInAddress() 
     // Get the place details from the autocomplete object.
     var place_a = autocomplete_to.getPlace();
     var place_b = autocomplete_from.getPlace();