如何使用Symfony 4从AJAX请求中获取数据?

时间:2019-01-05 15:30:25

标签: javascript php ajax symfony

我正在尝试从Symfony 4的AJAX请求中获取数据,但得到的不是我期望的。

这是我的路线。yaml

(...)
ajax_test:
    path: /ajax/test
    defaults: { _controller: 'App\Controller\AjaxTestController::test' }
    requirements:
        _method: POST

我的控制器:

<?php

namespace App\Controller;


use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

class AjaxTestController extends AbstractController
{
    public function test(Request $request) {
        if ($request->isXmlHttpRequest()) {
            $serializer = $this->get('serializer');
            $response = $serializer->serialize('test ok', 'json');

            return new JsonResponse(['data' => $response]);
        }

        return new Response("test ko", 400);
    }
}

这是我发出AJAX请求的模板:

{% extends "layout.html.twig" %}

{% set active = 'connexion' %}

{% block page_title 'Login' %}

{% block final_javascripts %}
    {{ encore_entry_script_tags('sendCredentials') }}
{% endblock %}


{% block content %}
    (...)

            <div class="row mt-4">
                <div class="col-md-6">
                    <form id="connexion-form" action="{{ path('security_connexion') }}" method="post">
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="text" id="email" name="_email" class="form-control">
                        </div>

                        <div class="form-group">
                            <label for="password">Mot de passe</label>
                            <input type="password" id="password" name="_password" class="form-control">
                        </div>

                        <button type="submit" class="btn btn-primary button">Se connecter</button>
                    </form>
                </div>

            </div>
        </div>
    </div></div>
{% endblock %}

最后是我发出AJAX请求的JavaScript文件(sendCredentials.js):

$(document).ready(function() {
    $('#connexion-form').submit(function(event) {
        sendCredentials($('#email').val(), $('#password').val());
    });
});

function sendCredentials(username, password) {
    $.ajax({
        method: "POST",
        url: "/ajax/test",
        data: {username: username, password: password},
        async: false
    }).done(function(msg) {
        console.log(msg['data']);
        console.log(msg);
    });
}

第一个日志console.log(msg['data']);显示undefined。第二个日志console.log(msg);向我显示模板本身的html代码,即由twig生成的模板的代码。我不明白为什么。如何获取所需的数据:'test ok'

P.S。 :我还没有使用凭据(usernamepassword),我只是在进行测试,我想首先使用AJAX请求。

0 个答案:

没有答案