AJAX 请求结合条带

Question

我已经查看了几个线程 Link 1 link 2。

我正在使用 stripe.js，我想通过一个按钮提交我的定制表格和一些其他带有附加信息的表格。想法是发送两种不同的消息，一种发送给客户端，一种发送给服务提供者。

我希望通过付款按钮（或此时的任何表单）提交这两种形式，这样我就可以在我的 controller/model 中选择名称作为索引，然后发送电子邮件，通知双方有关交易的不同事项。

问题是，stripe 处理 javascript 上的所有表单提交，我对如何将它与我自己的 AJAX 请求结合起来以同时发送两个表单感到有点困惑。

这是我现在视图中的 JS 代码，如果我这样做，则不会创建令牌，也不会执行任何操作：

function stripeResponseHandler(status, response) {

    // Grab the form:

    var $form = $('#payment-form');

    if (response.error) { // Problem!

      // Show the errors on the form:

      $form.find('.payment-errors').text(response.error.message);

      $form.find('.submit').prop('disabled', false); // Re-enable submission

    } else { // Token was created!

      // Get the token ID:

      var token = response.id;  

      // Insert the token ID into the form so it gets submitted to the server:

      $form.append($('<input type="hidden"name="stripeToken">').val(token));

      // Submit the form:

      $form.get(0).submit();

    }

  };


  function submitTwoForms() {

    var dataObject = {invoice: "invoice", name: "name", phone: "phone", email: "email", message: "message"};

      $.ajax({

        url  : base.url + '/index.php/contact',

        data : dataObject,

        type : "GET",

        success: $(function(){

              var $form = $('#payment-form');

              $form.submit(function(event) {

              // Disable the submit button to prevent repeated clicks:

              $form.find('.submit').prop('disabled', true);


              // Request a token from Stripe:

              Stripe.card.createToken($form, stripeResponseHandler);

              //to prevent submit

              return false;   

              });       

        })

      });

  }


  $('#customButton').submit(function() {

    submitTwoForms();

    return false;

  });

非常感谢任何指点。

Answer 1

我最终按如下方式重写了我的代码，现在可以正常工作了。

<script>

 $("#customButton").on('click', function() {

  $('#contactForm')[0].submit(function(event){

    var formData = {

      'invoice'   :$('input[name=invoice]').val(),

      'name'      :$('input[name=name]').val(),

      'email'     :$('input[name=email]').val(),

      'phone'     :$('input[name=phone]').val(),

      'message'   :$('input[name=message]').val(),

    };


    $.ajax({

        type     : 'POST',

        url      : base.url + '/index.php/contact',

        data     : formData,

        dataType : 'json',

        encode   : true

    })

  });

})  

  function stripeResponseHandler(status, response) {

    // Grab the form:

    var $form = $('#payment-form');

    if (response.error) { // Problem!

      // Show the errors on the form:

      $form.find('.payment-errors').text(response.error.message);

      $form.find('.submit').prop('disabled', false); // Re-enable submission



    } else { // Token was created!

      // Get the token ID:

      var token = response.id;

      // Insert the token ID into the form so it gets submitted to the server:

      $form.append($('<input type="hidden" name="stripeToken">').val(token));

      // Submit the form:

      $form.get(0).submit();

    }

  };

  $(function() {

    var $form = $('#payment-form');

    $form.submit(function(event) {

      // Disable the submit button to prevent repeated clicks:

      $form.find('.submit').prop('disabled', true);

      // Request a token from Stripe:

      Stripe.card.createToken($form, stripeResponseHandler);

      // Prevent the form from being submitted:

      return false;

    });

  })

</script>

希望其他人可以受益。

AJAX 请求结合条带

AJAX request combined with stripe

javascript

forms

ajax

stripe-payments