jQuery Ajaxが同じページにロードされていません

Question

ストライプペイメントゲートウェイをロードしようとしています。何らかの理由で、ページは常に応答を表示する前にリフレッシュされます。私はページをリフレッシュしたくない。

これは、私が働いている 'jsの'（ 'jQueryの' はミックスとバニラ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

をした場合あなたのフォームは<input type="submit"/>ボタンで送信されますが、デフォルト動作を過負荷にするにはjavascriptの最後にfalseを返す必要があります。

Answer 2

私はリフレッシュ機能なしで同様のアップデートを書いています。

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

試してみてください：

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

私の関連するHTMLは次のとおりです。フォームで

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

鉱山とあなたを比較すると、私が代わりに示唆しています。