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

Posted 2023-02-24

【中文标题】如何在 React 中发送带有变量的 POST 请求？

【英文标题】：How to send a POST request with variables in React?

【发布时间】：2021-10-12 20:25:48

【问题描述】：

我正在学习如何使用 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);
        
      );

【问题讨论】：

你的后端框架是什么？

您是否应该像第一个示例一样在查询参数中发送数据？还是你应该发送一个 json 正文？

使用 query-string 包来解析和字符串化 URL 查询字符串

见***.com/a/14551320/11895568

我的后端是 mysql，我应该在查询参数中发送数据（现在我知道它叫什么了）。所以我一直在做错事，作为 json 正文发送。

【参考方案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?

【讨论】：

我已经尝试过使用 axios 建议的方法，它可能有效，但我仍然收到相同的错误：从客户端检测到潜在危险的 Request.QueryString 值（ desc="<p>Hello World!</p>") 我认为这是因为我试图将 html 保存到数据库中，我试图通过使用以下方法来转义 html 标签： const desc = htmlContent.replace(/</g, '');但它仍然显示相同的错误。

这是因为 <p>Hello World</p> 值。 API 正在发回该响应消息。如果您负责 API，则可以停用该消息。虽然不那么推荐。

好的，现在我已经用 const desc = encodeURIComponent(htmlContent.replace(/'/g, '\'\'')) 对 html 代码进行了编码，POST 请求仍然没有当我通过应用程序发送请求时工作（得到错误 500），但是如果我复制参数并将其手动粘贴到浏览器中，它实际上成功插入了事件，所以这个错误与我的 axios post 方法有关用过的？ 我已经发布了我在原始帖子中使用的 POST 方法