时间戳

首页 > 解决方案 > Symfony + VueJs + Axios = 无发送表单参数

php - Symfony + VueJs + Axios = 无发送表单参数

问题描述

我正在使用 Symfony 4、VueJs 2 和 Axios 使用 Ajax 发送我的表单。表单发送没有明显问题，但似乎我的表单的输入数据没有随它一起发送。

好奇心：我做到了，但使用 jQuery Ajax 并且工作得很好。

我已经尝试过这个 2017 解决方案，但对我不起作用：POST Requests with axios not sent parameters

索引.html

<form id="form" @submit.prevent="sendForm">
    <input type="text" v-model="name">
    <input type="submit" value="Send">
</form>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let form = new Vue({
        el: "#form",
        data: {
            name: ""
        },
        methods: {
            sendForm: function () {
                axios
                    .get("/send", this.data)
                    .then(response => console.log(response.data))
            }
        }
    });
</script>

主页控制器.php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class HomeController extends AbstractController {
    /**
     * @Route("/", name="home")
     */
    public function index() {
        return $this->render('home/index.html.twig');
    }

    /**
     * @Route("/send", name="send")
     */
    public function sendForm(Request $request) {
        $name = $request->query->get("name");
        return new Response($name);
    }
}

标签： phpsymfonyvue.jsaxios

解决方案

在 Symfony 中尝试：$request->getContent().

示例：

// ...
class HomeController extends AbstractController {
    //...
    /**
     * @Route("/send", name="send")
     */
    public function sendForm(Request $request) {
        // Decode data with json_decode()
        $data = json_decode($request->getContent(), true);
        $name = $data['name'];

        return $this->json($name);
    }
    //...
}

享受！

推荐阅读