MVC Ajax 警报无法正常工作

Question

我的 alert() 在发布后没有显示...

当我提交表单时，我看到发布的数据，一切看起来都不错，但是 alert('ok');来自 ajax 没有出现。我错过了什么？

@model Mvc5.Models.Test

@using (Html.BeginForm())
{

        @Html.AntiForgeryToken() 
        @Html.ValidationSummary(true)


        @Html.TextBoxFor(model => model.Name)
    <input type="submit" value="Add" class="btn btn-default" id="idForm" />

}

<div id="target">
@Html.Action("ShowList", "Test")
</div>

<script>
    $(document).ready(function () {
        // this is the id of the form
        $("#idForm").submit(function () {

            var url = "Test/Create"; // the script where you handle the form input.

            $.ajax({
                type: "POST",
                url: url,
                data: $("#idForm").serialize(), // serializes the form's elements.
                success: function (data) {
                alert('ok');                
                }
            });

            return false; // avoid to execute the actual submit of the form.
        });

    });
</script>

Answer 1

如下所示添加错误并查看正在显示的警告消息。您还可以添加调试器和开发人员工具来调试它们。

$.ajax({
  type: "POST",
  url: url,
  data: $("#idForm").serialize(), // serializes the form's elements.
  success: function (result, status) {
    if (status == 'success') {
      if (result.success) {
        OnSuccessActions();
      } else {
        $('.ValidationSummary').html(result.Error);
      }
    }
  },   
  error: function() {
   alert('error!');
  }
});

Answer 2

你应该在提交给控制器之前验证表单，见下面的代码

$("#myForm").submit(function (e) {
                e.preventDefault();
            });
            $("input#submitForm").click(function () {
                if ($('#myForm').valid()) {
                    $.ajax({
                        type: "POST",
                        url: "/controllerName/ActionName",
                        data: $("#myForm").serialize(),
                        success: function (result) {
                           alert('sucess');
                        }
                    });

                } return false;
            });

并且不要忘记包含验证脚本

src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">
src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript">

还有 return json 来自控制器

public ActionResult ActionName()
{
  return Json(new { success = true }, JsonRequestBehavior.AllowGet);
}

希望对你有所帮助

Answer 3

如果您的 ajax 请求收到从您的 api 返回的 200 状态代码，您的成功函数将运行。我会仔细检查以确保发生这种情况。

编辑。

您还应该阻止表单执行服务器回发，因为您正在进行 ajax 调用。

$("#idForm").submit(function (e) {
      e.preventDefault();

      var url = "Test/Create"; // the script where you handle the form input.

MVC Ajax 警报无法正常工作

MVC Ajax alert not working properly

ajax

asp.net-mvc

jquery