如何从Js fetch() 中获取数据到服务器？答案

【问题标题】：How to get data to the server from Js fetch ()?如何从Js fetch() 中获取数据到服务器？
【发布时间】：2019-12-11 08:15:37
【问题描述】：

我尝试将数据从 js 传输到服务器，但我得到“null”。

我的js：

async function sort(param) {
        let classList = param.classList;
                    //"DateCreate"     //Ascending
        console.log(param.id + " " + classList[0]);
       let response = await fetch("/Amendment/Sort", {
            method: "POST",
            body: JSON.stringify({ sortValue : param.id, sortType : classList[0]})
        });
        if (response.ok) {
            let responseHtml = await response.text();
            document.getElementsByClassName("result").innerHTML = responseHtml;
            alert("OK");
        } else {
            alert("Error HTTP: " + response.status);
        }

在浏览器中：

服务器的方法（控制器：修改）：

  [HttpPost]
                                    //null           //null
  public IActionResult Sort(string sortValue, string sortType )
  {
         //*****//
      return PartialView("_TableData", model);
  }

【问题讨论】：

它说response.ok 是null 吗？
@RhaidzsalAli 我收到一条错误消息，因为我在服务器上的方法不起作用，因为它有输入参数 - null
我认为问题在于方法Sort有多个参数。请检查此weblog.west-wind.com/posts/2012/may/08/… 并特别关注将多个参数传递给 Web API 控制器。我可以假设你拥有的控制器是一个 ASP.NET MVC 控制器，但这不是问题，你会读到这一点也适用于这种类型的控制器。
@Christos 我想这就是我想要的。谢谢。
@Дмитрий 不客气。

标签： javascript c# asp.net asp.net-mvc

【解决方案1】：

解决方案 1：

您需要使用[FromBody] 属性，因为您的请求正文包含sortValue 和sortType。

还创建一个具有sortValue 和sortType 字符串属性的类，并在控制器操作方法中使用该类作为参数。

解决方案 2：

不是将sortValue 和sortType 放在正文中，而是从url 发送。

var url = "/Amendment/Sort?sortValue=" + param.id + "&sortType=" + classList[0];
let response = await fetch(url, {
    method: "POST"
});

【讨论】：

【解决方案2】：

问题在于框架将您发布的值绑定到此操作方法的参数的方式。如果你定义一个像下面这样的类：

public class SortModel
{
    public string SortValue { get; set; }
    public string SortType { get; set; }
}

然后使用这个类作为你的动作方法的唯一参数，那么框架将正确绑定发布的值。：

[HttpPost]
public IActionResult Sort(SortModel sortModel)
{
     // Then use 
     //   - sortModel.SortValue
     //   - sortModel.SortType
}

更多选项，您可以阅读this。

【讨论】：