时间戳

首页 > 解决方案 > 如何使用 axios 在 React 中同时发送和获取数据？

javascript - 如何使用 axios 在 React 中同时发送和获取数据？

问题描述

所以我在 React 中有这个 onClick 函数，其中一个 div 的内容将根据另一个 div 中的选定项目而改变。该函数看起来像这样，它将发出一个 post 请求来发送要接收的数据，并发出一个 get 请求来获取实际数据。

handleClick(event) {
this.setState({
  selected: event.target.innerText
});

axios.post("/e-commerce_with_purephp/acom_cms_admin/database/serveData.php", {category: this.state.selected})
.then(res => console.log("Response: " + res.parse))
.catch(error => console.log("Error: " + error))

axios
.get("/e-commerce_with_purephp/acom_cms_admin/database/serveData.php")
.then(response => response.data)
.then(data => {
  this.setState({
    ItemData: data
  })
})
}

我的 serveData.php 看起来像这样

<?php
include("connection.php");

if ($_SERVER['REQUEST_METHOD'] == "POST") {
$category = $_POST['category'];
}

if ($_SERVER['REQUEST_METHOD'] == "GET") {
    $sql = "SELECT * FROM `$category`";
    $result = mysqli_query($connection, $sql);
    echo "[";
for ($i = 0; $i < mysqli_num_rows($result); $i++) {
    echo ($i > 0 ? ',' : '') . json_encode(mysqli_fetch_object($result));
}
echo "]";
  } 

?>

除非我定义了类别，否则这不能正常工作。但在这种情况下，它只能处理一个数据并且是硬编码的。我不想一键从数据库中提取所有数据，因为在现实世界中获取所有数据需要更长的时间。我是 Axios 的新手，我参考了网络上的某些文章。

标签： javascriptphpreactjsaxios

解决方案

  1. [客户端 JS] 你想在一个接听电话中完成所有事情
  2. [后端 PHP] 不要在 PHP 中拆分这两个操作。不要在 POST 中设置类别，然后尝试在 GET 调用中使用它。这是两个不同的调用，PHP 不会$category在调用之间保留变量
axios.post("/e-commerce_with_purephp/acom_cms_admin/database/serveData.php", {category: this.state.selected})
.then(response => response.data)
.then(data => {
  this.setState({
    ItemData: data
  })
});
})
.catch(error => console.log("Error: " + error))

推荐阅读