javascript - 如何在不重新加载页面的情况下加载支付成功消息

Question

我正在使用自定义 Stripe 付款表单来处理付款。付款和一切都很顺利，但我的问题是页面正在重新加载，然后显示成功消息。如果可能的话，我想合并某种类型的 jquery ajax，但我的方法似乎不起作用。它仍然只是重新加载。

这是我的代码的分割。所有代码都位于同一页面上，但我将分割下面的主要区域。

表格:

<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>

</form

Javascript:

<script type="text/javascript">
            // this identifies your website in the createToken call below
            Stripe.setPublishableKey('test_key_goes_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
                    form$.get(0).submit();
                }
            }
</script>

PHP:

<?php
require 'lib/Stripe.php';

$error = '';
$success = '';

if ($_POST) {
Stripe::setApiKey("test_key_goes_here");

try {
if (empty($_POST['name']) || empty($_POST['password']) || empty($_POST['email']))
    throw new Exception("Fill out all required fields.");
  if (!isset($_POST['stripeToken']))
    throw new Exception("The Stripe Token was not generated correctly");
  Stripe_Charge::create(array("amount" => $_POST['posted'],
                              "currency" => "cad",
                              "card" => $_POST['stripeToken'],
             "description" => $_POST['email']));
  $success = '<div class="alert alert-success">
              <strong>Success!</strong> Your payment was successful.
     </div>';
}
catch (Exception $e) {
$error = '<div class="alert alert-danger">
     <strong>Error!</strong> '.$e->getMessage().'
     </div>';
}
}
?>



<div class="alert alert-danger" id="a_x200" style="display: none;"> <strong>Error!</strong> <span class="payment-errors"></span> </div>
<span class="payment-success">
<?= $success ?>
<?= $error ?>
</span>

这也是我正在尝试的 jquery ajax 请求:

已更新以包含 URL

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

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

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

  });

Answer 1

失败是因为您没有用于 ajax 调用的 url 属性。

例如:

var url = "your url here";
$.ajax({
    "dataType": "json",
    "type": "POST",
    "url": url,
    "data": params,
    "success": function (result) {
         // Your Logic HERE
    },
    "fail": function ShowFail(xhr) { alert("Sorry! Failed"); },
    "error": function (request, status, error) {
        alert('Error=' + error + ' & Status=' + status);
    }