为什么无法使用 ajax 调用对数据进行 POST 请求？答案

【问题标题】：Why unable to do a POST request with data using ajax call?为什么无法使用 ajax 调用对数据进行 POST 请求？
【发布时间】：2016-05-31 15:09:15
【问题描述】：

我正在尝试通过 POSTRequest 在客户端代码中插入数据。当请求转到控制器方法时，我无法检索发送的数据。客户端代码：

function AddUser()
    {         
        var user = { UserID: $('#UidTxt').val, UserName: $('#UnameTxt').val, Password: $('#PwdTxt').val, Email: $('#EmailTxt').val, Address: $('#AddrTxt').val, DOB: $('#DobTxt').val, Phone: $('#PhoneTxt') };
        $.ajax({
            url: 'http://localhost:61540/api/UserDetails/AddUser',
            type: 'POST',
            data: JSON.stringify(user),
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                alert("success! data is posted/inserted.")
            },
            error: function (xhr, status) {
                alert(xhr.ResponseText);
            }
        });
    }

Web Api 控制器方法：

[System.Web.Http.AcceptVerbs("POST")]
    [ActionName("AddUser")]
    [System.Web.Http.HttpPost]
    [System.Web.Http.HttpOptions]
    public List<UserDetails> AddUser(UserDetail oUserList)
    {
        if (oUserList != null)
        { 
        db.UserDetails.Add(oUserList);
        db.SaveChanges();
        }
        var userList = db.UserDetails.ToList();
        return DTOConverter.ConvertUserDetail(userList);
    }

在调试时，调用命中控制器方法，我发现 oUserList 对象为空。我是否正确传递数据？如果我错了，请纠正我。提前致谢。

编辑：

 function AddUser()
    {
        var UserID = $('#UidTxt').val();
        var UserName= $('#UnameTxt').val(); 
        var Password = $('#PwdTxt').val();
        var Email= $('#EmailTxt').val();
        var Address= $('#AddrTxt').val();
        var DOB = $('#DobTxt').val(); 
        var Phone = $('#PhoneTxt').val();
        var data = 'UserID=' + UserID + '&UserName=' + UserName + '&Password=' + Password + '&Email=' + Email + '&Address=' + Address + '&DOB=' + DOB + '&Phone=' + Phone ;
        $.ajax({ 
            url: 'http://localhost:61540/api/UserDetails/AddUser',
            type: 'POST',
            data: data,
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                alert("success! data is posted/inserted.")
            },
            error: function (xhr, status) {
                alert(xhr.ResponseText);
            }
        });
    }

【问题讨论】：

您是否尝试过使用 get 设置获取所有值，然后将其添加到一个字符串并将它们传递给 ajax？
所以添加 var username = UserID: $('#UnameTxt').val(); var 密码 = $('#PwdTxt').val();等添加 var data = 'username=' +username+ '&password=' +password+ etc ;在 ajax 调用中添加数据：数据，数据类型：'json'。如果您收到错误，请在此处写下哪一个。
你能发布UserDetails类的实现吗？你的AddUser 方法有UserDetail 或UserDetails 参数吗？
我按照你说的试过了，没有帮助。它抛出错误“未定义”。 @KondukterCRO
是的，它有 UserDetails 类的参数。 @feeeper

标签： jquery asp.net ajax asp.net-web-api http-post

【解决方案1】：

javascript 中的val 是错误的，它正确的语法ix val()。在下面的代码中更改您的 javascript

function AddUser()
{       
    var UserDetail = {
      UserID :$('#UidTxt').val(),
      UserName : $('#UnameTxt').val(),
      Password : $('#PwdTxt').val(),
      Email : $('#EmailTxt').val(),
      Address : $('#AddrTxt').val(),
      DOB : $('#DobTxt').val(),
      Phone :$('#PhoneTxt').val()
   };
    $.ajax({
        url: 'http://localhost:61540/api/UserDetails/AddUser',
        type: 'POST',
        data: JSON.stringify(UserDetail),
        dataType: "json",
        contentType: "application/json;charset=utf-8",
        success: function (data) {
            alert("success! data is posted/inserted.")
        },
        error: function (xhr, status) {
            alert(xhr.ResponseText);
        }
    });
}

为UserDetail创建模型

public class UserDetail
{
  public int UserID{get;set;}
  public string Username{get;set;}
  public string Password{get;set;}
  public string Email{get;set;}
  public string Address{get;set;}
  public DateTime DOB{get;set;}
  public int Phone{get;set;}
}

然后在控制器中

public JsonResult  AddUser(UserDetail oUserList)
{
    ..your code
}

您可以根据控制器中的变量来更改变量类型。
希望对您有所帮助

【讨论】：

我们不能将它作为对象传递吗？我使用相同的方法在 c# 代码中进行插入。现在我需要将数据作为对象传递给控制器方法。
还是一样。无法在控制器方法中检索值。
感谢您的回复。该代码仅适用于 IE，不适用于 chrome、firefox。有什么想法吗？
NO [FromBody] 没有帮助。我在所有非 IE 浏览器中都尝试过 oUserList 为空。
让我们continue this discussion in chat。

【解决方案2】：

As ，应使用其他 Val() 指出的，而不是 val ，如果您尝试提交表单，而不是 JSON 尝试使用 form.serialize() 方法并检查您是否能够在服务器端获取数据.

【讨论】：

【解决方案3】：

请检查您的 $.ajax 函数，根据您发布的代码，类型属性 POST 缺少关闭倒置，并且还像 @Harish 所说的那样使用 val()

【讨论】：

呃抱歉。我已经更新了代码。在我的代码中用引号括起来没问题。