jquery玩框架避免雙重提交

Question

我有一個jquery，在完整的提交和因爲提交發生兩次。有沒有辦法避免這種情況？

以下是代碼片段。

---

我的路線索賠加載看起來像這樣。

# Claim Loading for Historical Claims 
GET  /claimLoading   controllers.ClaimLoading.form 
POST /claimLoading   controllers.ClaimLoading.submit 

---

在我的控制器提交情況，如圖所示。

/** 
* Handle form submission. 
*/ 
def submit = Action { implicit request => 
claimLoadingForm.bindFromRequest.fold(
    // Form has errors, redisplay it 
    errors => { 
    Logger.info("Some error occurred before calling the service") 
    BadRequest(html.claimloading.form(errors)) 
    }, 
    claimLoading => { 
    // Invoke the LoadCSVorXML2Mongo service from here 
    claimsLoadingService.loadCSVOrXMLClaimToDatabase(claimLoading.claimLoadingPath) 

    val resultSummary = claimsLoadingService.retrieveSummaryInfo 
    // We got a valid ClaimLoading value, display the summary 
    Ok(html.claimloading.summary(claimLoading, Json.prettyPrint(resultSummary))) 
    } 

) 
} 

---

從按鈕點擊Jquery的通話>>>>

/views/claimloading/form.scala.html

<input type="button" class="btn primary" id="claimsLoadButton" value="Invoke Claim Loading"> 

---

Jquery的形式。 scala下索賠是>>>>

<script type="text/javascript" xmlns="http://www.w3.org/1999/html"> 

$(document).ready(function() { 
    $("#claimsLoadButton").click(function() { 
     createLoadingModal(); 
     showLoader(true); 
     $.ajax({ 
      url: "/claimLoading", 
      type: "POST", 
      data: $("#claimLoadingForm").serialize(), // serializes the form's elements. 
      dataType:"json", 
      success: function (data) { 
       showLoader(false); 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
      }, 
      complete: function (data) { 

       submitClaimsLoading(); 
      } 
     }); 
    }); 
}); 

function submitClaimsLoading() 
{ 
    $("#claimLoadingForm").submit(); 
    showLoader(false); 
} 

</script> 

Answer 1

使用event.preventDefault();停止按鈕單擊提交表單。

$(document).ready(function (event) { 
    event.preventDefault(); //add this here 
    $("#claimsLoadButton").click(function() { 
     createLoadingModal(); 
     showLoader(true); 
     $.ajax({ 
      url: "/claimLoading", 
      type: "POST", 
      data: $("#claimLoadingForm").serialize(), // serializes the form's elements. 
      dataType: "json", 
      success: function (data) { 
       showLoader(false); 
      }, 
      error: function (jqXHR, textStatus, errorThrown) {}, 
      complete: function (data) { 

       submitClaimsLoading(); 
      } 
     }); 
    }); 
});