使用 Ajax 调用操作方法失败答案

【问题标题】：Failed to call action method using Ajax使用 Ajax 调用操作方法失败
【发布时间】：2018-02-17 18:53:19
【问题描述】：

这是我的 JS（jQuery 和 Ajax）代码：

    $('#submitSignUp').click(function () {
    var name = $('#name').val();
    var email = $('#email').val();
    var password = $('#password').val();
    $.ajax({
        url: '@Url.Action("SignUp")',
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        data: JSON.stringify({ name: name, email: email, password: password }),
        success: function () {
            alert("Rgistered.");
        }
    })
})

这是我的行动方法。（它在“家庭控制器”中）：

        [HttpPost]
    public JsonResult SignUp(string name, string email, string password)
    {
        TodoNet.Models.TodonetModel database = new TodoNet.Models.TodonetModel();
        TodoNet.Models.User oUser = new TodoNet.Models.User()
        {
            FirstName = name,
            LastName = name,
            Email = email,
            Password = password,
            Salt = password,
            IsDeleted = false,
            IsOnline = false,
            PhoneNumber = "09212131212",
            RegisterDate = DateTime.Now,
            LastLoginDate = DateTime.Now
        };
        database.Users.Add(oUser);
        database.SaveChanges();
        return new JsonResult();
    }

但我不知道为什么它不起作用。单击“#signUpSubmit”按钮后，将不会显示“alert("Registered.")”。我做错了什么？？

注意：不使用Ajax，（通过使用普通的发送表单数据到action方法，一切正常（也就是说我知道后端代码没有问题）

【问题讨论】：

标签： ajax asp.net-mvc model-view-controller

【解决方案1】：

如果表单提交正常，那么您的 ajax 应该发送表单数据而不是 json。
另外，防止按钮单击的默认操作。

$('#submitSignUp').click(function (e) {
    e.preventDefault();
    $.ajax({
        url: '@Url.Action("SignUp")',
        type: "POST",
        dataType: "json",
        data: $("#the_form_id").serialize(),
        success: function () {
            alert("Rgistered.");
        }
    });
});

【讨论】：

【解决方案2】：

你也可以这样做。

在您的submitSignUp 上提交您的参数，如下所示。

 var param = 
 {
    name: $('#name').val(),
    email: $('#email').val(),
    password: $('#password').val()
 };
 $.ajax({
        url: '@Url.Action("SignUp")',
        type: "POST",
        dataType: 'json',
        data: JSON.stringify(param),
        async: false,
        cache: false,
        traditional: true,
        contentType: 'application/json',
        success: function (data) {
            alert(1)
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            //alert(errorThrown);
            return false;
        }
    });

更换你的控制器：

[HttpPost]
public ActionResult SignUp(string name, string email, string password)
{
  //other implementation
  return Json("", JsonRequestBehavior.AllowGet);
}

希望这会有所帮助！

【讨论】：

【解决方案3】：

试试这个作为你的 ajax 方法 -

$('#buttonID').on("click",function() {
var data=
{
    var name = $('#name').val();
    var email = $('#email').val();
    var password = $('#password').val();
};
    $.ajax({
        url: '@Url.Action("SignUp","ControllerName")',
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        data: JSON.stringify(data),
        success: function () {
            alert("success");
        }
    });
});

【讨论】：