Question

我正在尝试加载Stripe支付网关。由于某种原因，页面总是在显示响应之前刷新。我不希望页面刷新。

这是我正在使用的'js'（混合了'jQuery'和vanilla js）

<script type="text/javascript">
            // this identifies your website in the createToken call below
            Stripe.setPublishableKey('stripe_key_here');

            function stripeResponseHandler(status, response) {
                if (response.error) {
                    // re-enable the submit button
                    $('.submit-button').removeAttr("disabled");
                    // show hidden div
                    document.getElementById('a_x200').style.display = 'block';
                    // show the errors on the form
                    $(".payment-errors").html(response.error.message);
                } else {
                    var form$ = $("#payment-form");
                    // token contains id, last4, and card type
                    var token = response['id'];
                    var posted = document.getElementById("post-price").value
                    // insert the token into the form so it gets submitted to the server
                    form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
                    form$.append("<input type='hidden' name='posted' value='" + posted + "' />");
                    // and submit    

                    $("#payment-form").get(0).submit(function(e) {

                        e.preventDefault();
                        var url = "pricing.php";

                        $.ajax({
                               type: "POST",
                               url: url,
                               data: $("#payment-form").serialize(),
                               success: function(data)
                               {
                                   alert(data);
                               }
                             });

                    });

                }
            }
</script>

此处也有表格代码：

<form action="" method="POST" id="payment-form" class="form-horizontal">


  <div class="username-info">
    <input type="text" name="name" maxlength="70" placeholder="Your full name" class="name form-control" value="Test Name">
  </div>

  <div class="email-info">
    <input type="text" name="email" maxlength="65" placeholder="Email address" class="email form-control" value="testemail@email.com">
  </div>

  <div class="password-info">
    <input type="password" name="password" maxlength="70" placeholder="Password (min 6 characters)" class="password form-control" value="password123">
  </div>

  <div class="form-row">
    <label>
      <span>Card Number</span>
      <input type="text" size="20" data-stripe="number">
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Expiration (MM/YY)</span>
      <input type="text" size="2" data-stripe="exp_month">
    </label>
    <span> / </span>
    <input type="text" size="2" data-stripe="exp_year">
  </div>

  <div class="form-row">
    <label>
      <span>CVC</span>
      <input type="text" size="4" data-stripe="cvc">
    </label>
  </div>


  <button class="btn btn-success pricing-display-pay" id="post-price" value="300" type="submit">Pay $</button>

</form

Answer 1

我写了一个没有刷新功能的类似更新。比较你的，我建议而不是：

    $("#payment-form").get(0).submit(function(e) {

尝试：

 $('#payment-form').on('submit', function (e) {

我的相关HTML是：

 <input type="submit" value="submit" name="submit"/>

表格。

Answer 2

如果您的表单是通过<input type="submit"/>按钮提交的，则需要在javascript结尾处返回false以超载默认行为。

jQuery Ajax没有加载到同一页面

2 个答案: