如何在 React 中发送带有变量的 POST 请求？

Question

我正在学习如何使用 React 向 API 发送 POST 请求。

我现在想要实现的是向 API 发送 POST 请求。 API 将插入类似这样的事件（这个方法叫什么？）： https://api.com/WebService.asmx/insertEvent?event_id=5&desc=<p>HelloWorld</p>&name=testing

我当前用作 POST 的方法显示在 POST 方法 中，它返回错误 unexpected token '<' in json at position 0 和我在 console.log(JSON.stringify(event)) 时得到的结果是这样的：

{"event_id":"5","desc":"<p>HelloWorld</p>","name":"testing"}```

POST 方法

const response = await fetch('https://api.com/WebService.asmx/insertEvent', 
         {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify(event)
        })

编辑：我已通过对需要发送的 HTML 进行编码来修复上述错误。 这是我现在最新的 POST 方法，但由于某种原因，我仍然面临错误 500，即使当我从显示错误的 console.log 复制并粘贴 URL+参数时它仍然有效：

const addBulletin = async (event) => {
        console.log(event, '--event')
        const url = 'https://api.com/WebService.asmx/insertEvent';
        axios.post(url, null, { params: {
            title: event.title,
            desc: event.desc,
            image: event.image,
            employee: event.employee,
            entity: event.entity,
            startDate: event.startDate,
            endDate: event.endDate,
            createdBy: event.createdBy
        }})
        .then(response => console.log(response.status))
        .catch(err => console.warn(err));
    };

编辑：我已经使用 .ajax 和 POST 在 vanilla JS 项目上测试了 API，它可以工作，所以我认为 API 应该不是问题。

var json = $('.insert-form').serialize();

$.ajax({
        type: "POST", 
        url: "https://api.com/WebService.asmx/insertEvent",
        data: json,
        async: true,
        success: function (response) {
            alert("Event has been successfully created!");
        },
        error: function (response) {
          console.log(response);
        }
      });

Answer 1

您发送请求的 API 需要一个查询参数（URL 中的数据）。 https://api.com/WebService.asmx/insertEvent?event_id=5&desc=<p>HelloWorld</p>&name=testing 在这个请求中，我们发送了 3 个查询参数：event_id、desc 和 name。

要从 React 发送此类请求，您不应使用 请求正文。反而。我建议您使用axios 使其更容易。这是一个非常强大的库，比使用fetch 更好。应该这样做：

axios.post(`https://api.com/WebService.asmx/insertEvent`, null, { params: {
  event_id: eventId,
  desc
}})
.then(response => response.status)
.catch(err => console.warn(err));

这可能会有所帮助：How to post query parameters with Axios?