Javascript jQuery Ajax未在同一页面中加载

我正在尝试加载条带支付网关。由于某些原因，页面总是在显示响应之前刷新。不过我不想刷新页面

这就是我正在使用的“js”（jQuery和vanilla js的混合）

//这将在下面的createToken调用中标识您的网站
Stripe.setPublishableKey（'Stripe_key_here'）；
函数stripeResponseHandler（状态、响应）{
if（response.error）{
//重新启用提交按钮
$（'.submit按钮'）.removeAttr（“已禁用”）；
//显示隐藏的div
document.getElementById（'ax200'）。style.display='block'；
//在表单上显示错误
$（“.payment errors”）.html（response.error.message）；
}否则{
风险值表$=$（“#付款表”）；
//令牌包含id、last4和卡类型
变量标记=响应['id']；
var posted=document.getElementById（“post价格”）.value
//将令牌插入表单，以便将其提交到服务器
表格$追加（“”）；
表格$追加（“”）；
//并提交
$（“#付款单”）.get（0）.submit（函数（e）{
e、 预防默认值（）；
var url=“pricing.php”；
$.ajax({
类型：“POST”，
url:url，
数据：$（“#付款单”）.serialize（），
成功：功能（数据）
{
警报（数据）；
}
});
});
}
}

这里还有表单代码：

<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

卡号
有效期（年月日）
/ 
CVC
支付$
如果表单是通过
按钮提交的，则需要在javascript末尾返回false以重载默认行为。
我编写了一个类似的更新，但没有刷新功能。将你的与我的相比，我建议：

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

尝试：

我的相关html是：

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



在表单中。
删除
get（0）
，但是您的逻辑有点奇怪。不仅仅是因为jQuery和POJS之间的来回切换。这有点让人困惑，在该函数中有一个事件处理程序，该函数看起来像是在表单提交上运行的，那么为什么会有事件处理程序呢。另外，您使用的是本机
submit（）
，而不是jQuery版本的
submit（）
，这可能会导致一些问题。请使用典型的表单。提交或使用AJAX。不要两者都使用。向我们展示您的HTML表单。@StackUnderFlow不要使用表单底部的提交按钮。然后您可以删除
$（“#付款单”）。获取（0）。提交（…
。相反，只需使用常规按钮并将其单击事件连接到AJAX调用。如果您不希望表单实际提交，则只需使用
按钮
并将其设置为
单击
事件。在问题中显示的代码中，我们不知道他的表单的html结构以及该函数在哪个事件中绑定。Th这就是我谈论这个的原因。没关系。如果您希望AJAX控制您的数据提交（而且我们知道OP希望这样做），则您不希望表单提交。特别是因为OP告诉我们页面正在刷新。AJAX调用不会发生这种情况，而form.submit会发生这种情况。您可以轻松使用form.submit事件使用AJAX发布表单。如果您使用此方法，并且不返回false，您的网页将刷新，因为这是我们的html表单…显然，它不是那么容易，是吗？正如我对Person（上面）所说的，这种技术是违反直觉的，需要更多的代码并且容易出错。而且，返回false不是防止本机事件行为的正确方法。正确的方法是
event.preventDefault（）
后跟
event.stopPropagation（）
。有一个“提交”按钮来调用提交事件是违反直觉的，提交事件总是会被取消。这会导致编写更多的代码，并且（如本例所示）出现更多错误的机会。有关解决问题的正确方法，请参阅我对OP的评论。
 $('#payment-form').on('submit', function (e) {

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