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


How to load payment success message without reloading page

我使用自定义条纹支付表单来处理付款。付款和一切都通过一切好,但我的问题是,页面正在重新加载,然后显示成功的消息。我想合并一些类型的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);
             }
           });
  });

这是失败的,因为您没有一个url属性为您的ajax调用

例如:

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);
    }