如何使用 Ajax 调用具有 2 个输入的 2 个不同的 URL答案

【问题标题】：How can I call 2 different URLs with 2 inputs using Ajax如何使用 Ajax 调用具有 2 个输入的 2 个不同的 URL
【发布时间】：2018-06-21 05:44:43
【问题描述】：

我该如何做简短的 JS 编码呢？我想用 Ajax 写 value 和 data-sutun 的结果。

<input autocomplete="off"
       data-sutun="namedata"
       type="text"
       id="form-name"
       name="gonkod"
       class="form-control input-data typeahead" />

<input autocomplete="off"
       data-sutun="countrydata"
       type="text"
       id="form-country"
       name="gonkod"
       class="form-control input-data typeaheadtwo" />

$( document ).ready(function() {
  $('input.typeahead').typeahead({
    source: function (query, process) {
      var verim = $('#form-name').data('sutun');

      return $.post("{{ URL }}{{ dil }}/ajax/autogkod", { query: query, verim :verim }, function (data) {
        data = $.parseJSON(data);
        return process(data);
      });
    },
    showHintOnFocus:'all'
  });
});

$( document ).ready(function() {
  $('input.typeaheatow').typeahead({
    source: function (query, process) {
      var verim = $('#form-country').data('sutun');

      return $.post("{{ URL }}{{ dil }}/ajax/autogkod", { query: query, verim :verim }, function (data) {
        data = $.parseJSON(data);
        return process(data);
      });
    },
    showHintOnFocus:'all'
  });
});

【问题讨论】：

您可以做的第一件事是只有一个文档就绪函数....无需声明多个....其次，将您的 AJAX 调用放入一个接受一些参数的函数中（输入选择器，例如）.....
@cale_b: ajax 是插件实例化的一部分...

标签： javascript php jquery ajax autocomplete

【解决方案1】：

当您需要将特定于元素的数据传递给插件的各个实例时，请使用 each 循环，这样您就可以像 this 一样访问 each 中的元素实例

$('#form-name, #form-country').each(function(){
   var $input = $(this),
        // store verim here since `this` might be different in source callback
        verim = $input.data('sutun');

   $input.typeahead({
       .....

})

【讨论】：

感谢您的帮助。我可以的

【解决方案2】：

如果两个输入的 {{ URL }} 不同...

在每个数据属性中都有{{ URL }}。

<input autocomplete="off"
       data-sutun="namedata"
       data-url="{{ URL }}{{ dil }}/ajax/autogkod"
       type="text"
       id="form-name"
       name="gonkod"
       class="form-control input-data typeahead" />

<input autocomplete="off"
       data-sutun="countrydata"
       data-url="{{ URL }}{{ dil }}/ajax/autogkod"
       type="text"
       id="form-country"
       name="gonkod"
       class="form-control input-data typeaheadtwo" />

然后，在typeahead 实例化中，使用$(this).data("url")。

$( document ).ready(function() {
  $('input.typeahead, input.typeaheadtwo').typeahead({
    source: function (query, process) {
      var verim = $('#form-name').data('sutun');

      return $.post($(this).data("url"), { query: query, verim :verim }, function (data) {
        data = $.parseJSON(data);
        return process(data);
      });
    },
    showHintOnFocus:'all'
  });
});

请注意，您可以拥有多个选择器...您可以像这样用逗号分隔它们：$('input.typeahead, input.typeaheatwo')

【讨论】：