Question

背景：

以下AJAX代码可以成功运行（ReactJS + JQuery frontend, PHP backend）。

    const data = {request_type:"load_data", start:1, end:50};

    $.ajax({
        type: "POST",
        url: "http://localhost/site/server.php",
        data: data,
        dataType: "json", 
        success: (JSobject) => {
            this.setState({arr: JSobject.arr});
        }
    });

在Chrome开发工具server.php的标题中，显示为“ Form Data”，如下所示：

在PHP服务器后端，有以下代码行：

    $request_type = $_POST["request_type"];

为了尝试学习如何进行提取（到目前为止，我之所以避免了它，主要是因为我的AJAX样板运行良好），我一直在尝试为上述代码构建直接替代品

我尝试过：

    const data = {request_type:"load_data", start:1, end:50};

    fetch("http://localhost/site/server.php", {
        method: "POST",
        body: data
    })
        .then((JSobject) => {
            this.setState({arr: JSobject.arr});
        });

但是我得到这个PHP错误：

注意：未定义的索引：... server.php中的request_type

在Chrome开发工具server.php中，标题显示如下：

所以，我尝试像这样将数据更改为JSON.stringify（data）：

    const data = {request_type:"load_data", start:1, end:50};

    fetch("http://localhost/site/server.php", {
        method: "POST",
        body: JSON.stringify(data)
    })
        .then((JSobject) => {
            this.setState({arr: JSobject.arr});
        });

但是我仍然得到完全相同的PHP错误：

注意：未定义的索引：... server.php中的request_type

在Chrome开发工具server.php中，标题显示如下：

出于普遍的沮丧（尽管这毫无意义，因为我仍在使用JQuery），我认为我会使用JQuery的$.param()，这肯定可以。

所以我尝试了这个：

    const data = $.param({request_type:"load_data", start:1, end:50});

    fetch("http://localhost/site/server.php", {
        method: "POST",
        body: data
    })
        .then((JSobject) => {
            this.setState({arr: JSobject.arr});
        });

仍然出现相同的PHP错误

注意：未定义的索引：... server.php中的request_type

在Chrome开发工具server.php中，标题显示如下：

我的问题：我该如何修改上面的Fetch代码，使其成为顶部AJAX代码的直接替代。

我意识到某些情况下使用水平线可能会很麻烦。您可以允许自己相信，它确实可以帮助我们许多普通人了解问题的所在。

Answer 1

为将来可能会遇到此问题的其他人解答我自己的问题（也供我自己参考）。通过this link和this link找出答案。以下代码有效：

fetch("http://localhost/site/server.php", {
    method: "POST",
    body: JSON.stringify(data)
}).then(response => {
      return response.json();
   }).then((JSobject) => {
       this.setState({arr: JSobject.arr});
      });

我不得不更改服务器上的一些PHP代码。最初的“网守”代码为：

$_POST = array_map("trim", $_POST);

$request_type = $_POST["request_type"];

必须对此进行注释：

$_POST = array_map("trim", $_POST);   //this had to be commented out

并且必须添加它：

$content = trim(file_get_contents("php://input"));
$_POST = json_decode($content, true);

在Chrome开发工具中，server.php的标题显示为“ Request Payload”：

我还看到了一些建议，例如添加“ headers”键：

fetch("http://localhost/site/server.php", {
    method: "POST",
    headers: {"Content-Type": "application/x-www-form-urlencoded",},
    body: JSON.stringify(data)
}).then(response => {
      return response.json();
   }).then((JSobject) => {
       this.setState({arr: JSobject.arr});
      });

这也可行，但是在Chrome开发工具server.php的标题中显示为“ Form Data”：

另一种方法是将要发送的对象包装在JQuery的$.param()中（我对此很感兴趣，因为我经常使用$.param()将键值附加到{{1} }，在客户端发送到服务器上的PHP之前

form.serialize()

这样做的好处是不需要更改服务器端的代码。

在Chrome开发工具中，const data = $.param({request_type:"load_data", start:1, end:50}); fetch("http://localhost/site/server.php", { method: "POST", headers: {"Content-Type": "application/x-www-form-urlencoded",}, body: data }).then(response => { return response.json(); }).then((JSobject) => { this.setState({arr: JSobject.arr}); });的标题显示为“ server.php”：

不使用JQuery：

Re：前一种方法（使用Form Data）可以完全不用$.param()来完成，但是随后需要一个函数来链接javascript对象的键值对，同时正确地编码特殊字符为x-www-form-urlencoded（this link进行了说明）。

例如，代替此：

JQuery

一个人会这样做：

const data = $.param({request_type:"load_data", start:1, end:50});

...
body: data

此AJAX样板的ReactJS Fetch替代品

1 个答案: