如何使用Ajax使用2个输入调用2个不同的URL

时间:2018-01-11 19:47:57

标签: javascript php jquery ajax autocomplete

如何进行简短的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'
  });
});

2 个答案:

答案 0 :(得分:0)

每当您需要将元素特定数据传递到插件的各个实例时,请使用each循环,以便您可以each中的this访问元素实例

$('#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({
       .....

}) 

答案 1 :(得分:0)

如果两个输入的{{ 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')