使用 fetch 通过 put 方法传递参数的问题答案

【问题标题】：Problems passing parameters through the put method using fetch使用 fetch 通过 put 方法传递参数的问题
【发布时间】：2019-03-09 16:29:55
【问题描述】：

我在尝试使用 fetch 通过 put 方法传递参数时遇到问题

为此，我正在尝试以下方法

fetch(`brands/${id}`, {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({name: 'dummy text'})
})
    .then(response => response.json())
    .then(json => {
        if (json.status === 'ok') {
            // do some relevant logic

            return false;
        }

        showErrors(json.errors);
    })
    .catch(error => console.error(error.message));

我也在尝试使用 FormData 接口

const formData = new FormData();

formData.append('name', 'some dummy text');

fetch(`brands/${id}`, {
    method: 'PUT',
    body: formData
})
    .then(response => response.json())
    .then(json => {
        if (json.status === 'ok') {
            // Some relevant logic

            return false;
        }

        showErrors(json.errors);
    })
    .catch(error => console.error(error.message));

但我得到相同的结果（名称参数不在控制器中）

检查了网络选项卡，我可以看到 ajax 已被调用，并且在参数选项卡中我可以看到变量已传递。但是当尝试从控制器访问这些参数时，它们不会出现。

感谢您的帮助

在后台打印本次查询接收到的参数时，name参数没有列出。

在后端，控制器定义中的相关部分如下

update方法只能通过put方法调用

static allowedMethods = [
    save: 'POST',
    update: 'PUT'
]

这里希望name参数有值，但是参数不存在

def update() {
    try {
        Brand brand = brandService.update(params.id, params.name)

        render(contentType: 'application/json') {
            [status: 'ok', brand: brand]
        }
    } catch(ValidationException e) {
        render(contentType: 'application/json') {
            [status: 'fail', errors: e.errors]
        }
    }
}

【问题讨论】：

您是否尝试过发送字符串化的 JSON？如果不先迭代并存储在新对象中，FormData 对象可能会出现意外行为。
感谢您的回答，我正在尝试发送字符串化 JSON，我在此 mdn 帖子 developer.mozilla.org/en-US/docs/Web/API/Fetch_API/… 中找到了一个示例，这里是使用 formData developer.mozilla.org/en-US/docs/Web/API/Fetch_API/… 的示例
你有像 nodejs 这样的 body-parser 包吗？
你的意思是像中间件这样的东西吗？在控制器之前没有任何东西可以操纵请求正文
示例是上传文件。在控制台中查看您的 formData ...我最近在使用 fetch 发布表单数据并将其转换为常规 JSON 时遇到了困难，这为我解决了这个问题。

标签： javascript grails

【解决方案1】：

通过这个小助手运行表单可能会成功：

form2Obj(form) {
    const obj = {};
    new FormData(form).forEach((val, key) => obj[key] = val);
    return obj;
}

【讨论】：

这不会破坏为单个键发送多值（对于表单中的数组）？
你的意思是一组无线电输入吗？能举个例子吗？