Question

在ASP.NET MVC项目中，如果来自AJAX代码的结果为false，我希望按钮不进行提交。

但是它总是使提交。

那是代码：

@using (Html.BeginForm("Add", "Category", FormMethod.Post))
{

    <input name="CategoryID" id="myCategoryId" type="text" value="0" />

    <input name="CategoryName" id="myCategoryNameId" type="text" value="" />


    <input class="btn btn-primary" id="myid" type="submit" value="Add" />
}

那是Javascript代码：

$('#myid').on('click', function(event) {

    var data = {};
    data.CategoryName = $("#myCategoryNameId").val();
    data.CategoryID = $("#myCategoryId").val();

    $.ajax({
        type: 'POST',
        data: JSON.stringify(data),
        url: '/Category/ValidateCategoryName',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {

            if (!result) {

                event.preventDefault();
            }
        }
    });
});

Answer 1

我将用按钮元素替换提交按钮输入元素，以便单击按钮将触发onclick事件，而无需提交表单。然后，当您收到ajax响应时，您可以有条件地使用jQuery提交表单。这可能需要进行一些修改才能从onclick中获取表单，但这会阻止您像我怀疑您的问题那样提早提交表单。

for

和

@using (Html.BeginForm("Add", "Category", FormMethod.Post))
{
    <input name="CategoryID" id="myCategoryId" type="text" value="0" />
    <input name="CategoryName" id="myCategoryNameId" type="text" value="" />
    <button class="btn btn-primary" id="myid">Add</button>
}

Answer 2

很长一段时间以来，我知道Form的默认重定向操作不会等到ajax返回其结果..因此，您可以使用布尔变量来控制该操作..请参见下一个代码

$(document).ready(function(){
  var DefaultFormAction = false;   //set the default form action to false
  $('form').on('submit' , function(e){
    var $this = $(this);
    if(DefaultFormAction == false){  // when the default action is false 
      e.preventDefault();   // prevent the default redirect
      setTimeout(function(){   // I use setTimeout here for testing .. Use the next code in your ajax success
        DefaultFormAction = true;   // return default action to true
        $this.submit();       // then submit the form again
      } ,10000);
      console.log('This result when default is false you will go to the default form action after 10second');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input name="CategoryID" id="myCategoryId" type="text" value="0" />
  <input name="CategoryName" id="myCategoryNameId" type="text" value="" />
  <input class="btn btn-primary" id="myid" type="submit" value="Add" />
</form>

要测试 Form的默认重定向操作将不会等到ajax返回其结果，您可以在e.preventDefault()内使用setTimeout，甚至花一点时间是1毫秒，没有$this.submit()，它将仍然使用默认重定向

$(document).ready(function(){
  var DefaultFormAction = false;   //set the default form action to false
  $('form').on('submit' , function(e){
    var $this = $(this);
    if(DefaultFormAction == false){  // when the default action is false 
      setTimeout(function(){   // I use setTimeout here for testing .. Use the next code in your ajax success
        e.preventDefault();   // prevent the default redirect
      } , 1);
      console.log('This result when default is false you will go to the default form action after 10second');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input name="CategoryID" id="myCategoryId" type="text" value="0" />
  <input name="CategoryName" id="myCategoryNameId" type="text" value="" />
  <input class="btn btn-primary" id="myid" type="submit" value="Add" />
</form>

Answer 3

详细说明我在上面的评论。更改

<td>{{ findRate2ndNextMonthRateByKey(rc.key) | currency}}</td>

到

  <input class="btn btn-primary" id="myid" type="submit" value="Add" />

然后在成功功能中进行更改

  <input class="btn btn-primary" id="myid" type="button" value="Add" />

到

if (!result) {
   event.preventDefault();
}

这样，您将仅在result为true时提交表单，如果ajax调用失败或result为false则将不提交表单。

免责声明：上面的代码可能无法正常工作，但我希望您能从容接受。

Answer 4

最简单的方法：

$(document).on('submit','form' function(event) {
    event.preventDefault();
    event.stopImmediatePropagation();

    $this = $(this);

    var data = {};
    data.CategoryName = $("#myCategoryNameId").val();
    data.CategoryID = $("#myCategoryId").val();

    $.ajax({
        type: 'POST',
        data: JSON.stringify(data),
        url: '/Category/ValidateCategoryName',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            if (result) {
                $this.submit();
            }
        }
    });
});

如何防止提交取决于AJAX的结果

4 个答案: