ページを再ロードせずに支払い成功メッセージを読み込む方法

Question

私はカスタムストライプ支払いフォームを使用して支払いを処理しています。お支払いとすべてのものがすべて良いですが、私の問題は、ページがリロードされてから成功メッセージが表示されることです。可能であれば、jquery ajaxのいくつかの型を組み込みたいのですが、私のメソッドは動作していないようです。それはまだリロードだけです。

ここに私のコードの内訳です。すべてのコードは同じページにありますが、私は下の主な領域を分解します。

FORM：

<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のリクエストです：

はあなたの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

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