Question

我正在尝试使用以下代码将一些数据从Vue.js发布到基于Symfony的后端。

       updateQuestion : function() {
            axios.post('/staff/question/api/' + this.id,{
                    id : 'test',
                    name : 'sree'
            })
                .then( response => {

                console.log(response);
            })
                .catch(error => {
                    console.log(error);
                })
        },

但是，我附加到POST请求的参数未到达我的控制器。所以，我尝试了POST请求的备用格式，但参数还没有到达控制器。请告诉我出了什么问题。

替代格式：

 updateQuestion : function() {
            axios({

                method : 'POST',
                url : '/staff/question/api/' + this.id,
                data: {
                    id : 'test',
                    name : 'sree'
                }

            })
                .then( response => {

                console.log(response);
            })
                .catch(error => {
                    console.log(error);
                })
        },

Answer 1

我也遇到过这个问题！我的帖子数据在控制器中找到：

$request->getContent();

我的vue脚本

onSubmit() {
  axios.post('/test/post/data', { test: "test" })
    .then(response => {
      console.log(response.data);
    });
},

我的Symfony控制器：

public function postData(Request $request)
{
    $data = $request->getContent();
    $data = json_decode($data, true);

    return $this->json($data);
}

Answer 2

安装FOSRestBundle可以解决此问题。

composer require friendsofsymfony/rest-bundle

https://github.com/FriendsOfSymfony/FOSRestBundle

使用此捆绑包，传入的json请求将自动转换为一个数组，可以直接在$request->request->all()或$request->request->get('myparam')中使用。

文档摘录：

此捆绑包提供了各种工具，可通过Symfony快速开发RESTful API和应用程序。功能包括：

用于启用输出和格式化不可知控制器的View层
自定义路由加载器，用于生成遵循REST约定的url
接受标头格式协商，包括处理自定义mime类型
HTTP请求主体和Accept标头的RESTful解码
用于发送适当的HTTP状态代码的异常控制器

Answer 3

你的语法没有错。但检查this.id - 如果你没有做任何错误，this.id是未定义的，或者其他什么。如果this.id没问题，那么在控制器中记录完成请求并查找数据。

updateQuestion: function () {
  axios
  .post('/staff/question/api/' + this.id, {
    id: 'test',
    name: 'sree'
  })
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.error(error)
  })
}

Answer 4

除了使用$request->getContent();之外，您还可以在JavaScript文件中执行以下操作，以便在后端使用$request->request->all()。

我需要这样做来编写测试，因为$request->getContent();在测试中为空。

const params = new URLSearchParams();
params.append('id', 123456);
params.append('name', 'some name');

axios({
  method: 'post',
  url: '/staff/question/api/' + this.id,
  data: params
});

另请参阅：https://github.com/axios/axios/issues/1195#issuecomment-347021460

Answer 5

如果你不想使用 $request->getContent(); 而是像 user6748331 建议的那样像 $_POST 变量一样处理它，这里有一个函数：

utils.js（或其他）：

export function preparePostData(data) {
    const formData = new FormData();
    for (let key in data) {
        if (data.hasOwnProperty(key)) { // for the sake of editor not screaming
            formData.append(key, data[key]);
        }
    }

    return formData;
}

前端的某个地方：

import {preparePostData} from "utils";
const data = {
  firstname: "Foo",
  lastname: "Bar"
}

const postData = preparePostData(data);
axios.post("/whereever", postData);

在你的 Symfony 控制器中：

$data = $request->request->all();

附言这仅适用于普通对象。如果你想发布数组和东西，你可能还需要在 Symfony 中 json_decode。或更改 preparePostData 函数以使其递归。

axios不发送参数的POST请求

5 个答案: