如何获得触发点击的ajax响应

Question

当我单击buynow 按钮通过ajax 发送请求时，我有两种buy now 和pincode 表单，pincode 表单也有相同的操作。

HTML

 <form method="POST" action="/cart/add" id="myForm"> 
  .....
  ....
  <input type="button"  class="buyNowBtn" id="btnBuyNow"/>
 </form>

 <form action="#">
     <input type="text" id="pinCheck" class="pinCheck" placeholder="enter pin code" />
     <button class="btn btn-info" id="pinCheckTest"> Check</button>
 </form>

在同一个buynow点击事件中我需要trigger一个pincode提交按钮，所以我这样做了

(document).on('click', '#btnBuyNow', function (e) {
    ....
    ....
    $("#pinCheckTest").trigger('click');
    ....

});

以上trigger事件成功调用pincode点击事件

$('#pinCheckTest').click(function () {
  $.ajax({
    type: 'GET',
    url: url,
    success: function (output) {
        if (output == 'true') {
            }
       else{
        }
    }
});

但我需要让ajax 回复trigger 事件，以便我可以做一些操作，这可能吗？

类似

 (document).on('click', '#btnBuyNow', function (e) {
    ....
    ....
    $var output=$("#pinCheckTest").trigger('click');//I need to get ajax response back to this click
    if(output=='true'){
           ......
      }else{
       .....
      }
    ....

});

Answer 1

您可以在两个click 处理程序之外定义一个变量，当调用.trigger() 时，将$.ajax() 分配给变量，在第一个click 处理程序中使用.then() 来处理$.ajax() 调用的结果。

注意，包括event.preventDefault() 以防止@IsmailRBOUH 指出<form> 的提交

var dfd;
$(document).on('click', '#btnBuyNow', function (e) {
    e.preventDefault();
    ....
    ....
    $("#pinCheckTest").trigger('click');
    if (dfd) {
      dfd.then(function(output) {
        // do stuff with output
        console.log(output)
      })
    }
    ....

});

$('#pinCheckTest').click(function (e) {
  e.preventDefault();
  dfd = $.ajax({
    type: 'GET',
    url: url,
    success: function (output) {
      if (output == 'true') {}
      else{};
    }
  })

});

var dfd;

$("#first").click(function() {
  $("#second").trigger("click");
  if (dfd) {
    dfd.then(function(data) {
      alert(data)
    })
  }
})

$("#second").click(function() {
  // do ajax stuff
  dfd = $.when("second clicked")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="first">first button</button>
<button id="second">second button</button>

Answer 2

由于您将点击事件绑定到form 内的button，因此您可以阻止默认行为，即“提交表单”。将您的代码更改为：

$('#pinCheckTest').click(function (e) {
    e.preventDefault();
    //Your ajax call
});

这里有一个演示来说明区别https://jsfiddle.net/qvjjo3jk/。

更新1：

在您的表单中添加id：

<form action="#" id="pinCheckForm">
     <input type="text" id="pinCheck" class="pinCheck" placeholder="enter pin code" />
     <button class="btn btn-info" id="pinCheckTest"> Check</button>
 </form>

然后：

$('#pinCheckForm').submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: 'GET',
        url: url,
        data: $(this).serialize(), //Sends all form data
        success: function(output) {
            if (output == 'true') {} else {}
        }
    });
});