javascript - 使用 Fetch 发送 url 中的变量和 Body 中的对象

Question

我正在处理我的项目，其中将 Asp.net 与 c# 和 Javascript 结合使用。
我用 c# 设置了我的 Controller ，它接受一个对象和两个附加变量。这是一个 HttpPost 请求，在我添加其他变量之前它可以正常工作。我在我的 fetch json 函数中使用了 console.log 来检查我是否真的得到了想要的值，我就是。
这个 fetch 与 postman 一起工作得很好!

我还尝试在租用对象上切换位置，使其位于最后一个位置，如果 fetch 的主体也是在最后发送的，但它不起作用。
这是我在 chrome 浏览器中调用该函数时得到的结果:
https://localhost:44363/rent/save?movieId=2&maxRents=3状态 = 400

感觉我在这里遗漏了一些非常基本的东西，也许您无法通过请求同时发送变量和正文？

这是 Controller 代码:

[HttpPost("save")]

        public ActionResult<Rented> SaveRent(Rented newLoan, int movieId, int maxRents)
        {

            var amountOfRent = _appDbContext.Rents.Where(m => m.MovieId == movieId);

            if (maxRents <= amountOfRent.Count())
            {
                _appDbContext.Rents.Add(newLoan);
                _appDbContext.SaveChanges();
                return newLoan;
            }
            else
            {
                return BadRequest();
            }
        }

这是 Fetch 函数:

function addToStudio(element) {
    var movieId = element.id;
    var studioId = element.value;
    var maxRents = element.name;
    var newId = Number(movieId);
    var newStudioId = Number(studioId);
    console.log(maxRents);
    fetch('https://localhost:44363/rent/save?movieId=' + movieId + '&maxRents=' + maxRents, {
      method: 'POST',
      body: JSON.stringify({
        studioId: newStudioId,
        movieId: newId
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8"
      }
    })
    .catch(err => console.error("response-error", err)) 
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(err => console.error("json error", err)) 

    container.innerHTML = `<h1>Saved</h1>`
  }

Answer 1

我可以在这里看到几个问题:

您正在使用请求正文和 URL 查询。

您在控制方法签名中缺少一些重要的属性。

我个人总是尝试使用单一方法(正文或 URL 查询)。我发现它使代码更具可读性并且不易出错。

首先，决定你想如何传递数据:

通过请求体

在 URL 查询中

混合方式

然后相应地编写您的方法。

体内

最简单的方法是将您的信息封装在 .Net 对象中并在 JavaScript 中 Jsonify 其字段:

public class RentDetails
{
    public int MovieId {get; set;}
    public int MaxRents {get; set;}
    public Studio {get; set;} // you can also use objects, deserializing the Json will fill them as well.
}

然后你想在你的方法的签名中指定你正在接收 RentDetails在请求的正文中。

[HttpPost("save")]
public ActionResult<Rented> SaveRent([FromBody] RentDetails rentDetails) { ... }

最后，您希望 Jsonified 主体反射(reflect)应接收的对象(注意字段名称):

const request = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ 
                movieId : movieID, 
                maxRent : maxRent, 
                studio: 
                { 
                    // nested fields for nested objects
                } 
            })
        };

如果您按照这些步骤操作，您的 Controller 将自动将主体中的 json 反序列化为对象，并准备好供您使用。

在 URL 查询中

这更容易处理，但可能会变得困惑。

连接 javascript 中的字段，你已经在做什么了:

const link = baseLink.concat('?movieId=', movieId, '&maxRent=', maxRent, ...);
const result = await fetch(link); // no request is needed here, you already have all you need.

然后从 Controller 访问这些字段:

[HttpPost("save")]
public ActionResult<Rented> SaveRent() //<- no parameters are needed here 
{
    var allUrlKeyValues = HttpUtility.ParseQueryString(Request.QueryString.Value);
    var movieId = int.Parse(allUrlKeyValues["movieId"]);
    var maxRent = int.Parse(allUrlKeyValues["maxRent"]);
    ....
    // as you see you can only pass strings in this way
}

混合方法

当然，您可以选择混合方法，只需使用上述代码的组合即可。

请注意，越简单越好;)。