在使用REST表單提交時遇到問題

Question

在使用REST表單提交時遇到問題。

我想通過ajax從表單發佈數據，問題是當我這樣做時，頁面刷新並轉到給定的URL，而不是停止並阻止默認操作（您可以看到，我是這樣做）。

爲什麼頁面會刷新，我該如何阻止它，以便按預期方式將控制檯登出數據？

$("payment-sign-up-delivery-account-setup").submit(function(e) { 
 
    e.preventDefault(); //STOP default action 
 
    $this = $(this), 
 
    $formURL = $(this).attr("action"), 
 
    $postData = $this.serializeArray(); 
 
    $.ajax({ 
 
    type: "post", 
 
    data: $postData, 
 
    url: $formURL, 
 
    success: function(data, textStatus, jqXHR) { 
 
     console.log(data, textStatus, jqXHR); 
 
    }, 
 
    error: function(jqXHR, textStatus, errorThrown) { 
 
     console.error(jqXHR, textStatus, errorThrown); 
 
    } 
 
    }); 
 
    e.unbind(); //unbind. to stop multiple form submit. 
 
}); 
 

 
$("payment-sign-up-delivery-account-setup").submit(event);

<form id="payment-sign-up-delivery-account-setup" method="post" action="https://somesite/somearea/somefile"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <h1 class="delivery-title">Where should we ship?</h1> 
 
     </div> 
 
     <div class="col-xs-12 col-md-6"> 
 
     <label>First Name<span>*</span> 
 
     </label> 
 
     <input type="text" placeholder="First Name" name="forename" required> 
 
     </div> 
 
     <div class="col-xs-12 col-md-6"> 
 
     <label>Last Name<span>*</span> 
 
     </label> 
 
     <input type="text" placeholder="Last Name" name="surname" required> 
 
     </div> 
 
     <div class="col-xs-12 col-md-6"> 
 
     <label>Address Line 1<span>*</span> 
 
     </label> 
 
     <input type="text" placeholder="Address Line 1" name="address1" required> 
 
     </div> 
 
     <div class="col-xs-12 col-md-6"> 
 
     <label>Address Line 2</label> 
 
     <input type="text" placeholder="Address Line 2" name="address2"> 
 
     </div> 
 
     <div class="col-xs-12 col-md-6"> 
 
     <label>City/Town<span>*</span> 
 
     </label> 
 
     <input type="text" placeholder="City" name="city" required> 
 
     </div> 
 
     <div class="col-xs-12 col-md-6 hidden"> 
 
     <label>County</label> 
 
     <input type="text" placeholder="County" name="county"> 
 
     </div> 
 
     <div class="col-xs-12 col-md-6"> 
 
     <label>Post Code<span>*</span> 
 
     </label> 
 
     <input type="text" placeholder="Post Code" name="postcode" required> 
 
     </div> 
 
     <div class="col-xs-12 col-md-6 hidden"> 
 
     <label>Select your country<span>*</span> 
 
     </label> 
 
     <select name="countryCode" required> 
 
      <option value="UK">United Kingdom (UK)</option> 
 
     </select> 
 
     </div> 
 
     <div class="col-xs-12 col-md-6"> 
 
     <label>Phone Number</label> 
 
     <input type="tel" placeholder="Phone" name="phone"> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
     <h1 class="delivery-title">Confirm Your Login Details</h1> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
     <label>Email<span>*</span> 
 
     </label> 
 
     <input type="email" placeholder="Please enter the same email used above" class="input-50" name="email" required> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
     <label>Password<span>*</span> 
 
     </label> 
 
     <input type="password" placeholder="Please enter the same password used above" class="input-50" name="password" required> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
     <input type="submit" value="Complete order"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>

Answer 1

刪除此行：$("payment-sign-up-delivery-account-setup").submit(event);

這裏是你的代碼（有一些小的修正）：

$("#payment-sign-up-delivery-account-setup").on('submit', function(e) { 
    e.preventDefault(); //STOP default action 
    var $this = $(this), 
     $formURL = $(this).attr("action"), 
     $postData = $this.serializeArray(); 
    $.ajax({ 
    type: "post", 
    data: $postData, 
    url: $formURL, 
    success: function(data, textStatus, jqXHR) { 
     console.log(data, textStatus, jqXHR); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { 
     console.error(jqXHR, textStatus, errorThrown); 
    } 
    }); 
    e.unbind(); //unbind. to stop multiple form submit. 
}); 

否則，你可以只添加返回false;在末尾