jquery - jquery play框架避免双重提交

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">

---

声明加载下 form.scala 中的 Jquery 是 >>>>

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