在 symfony2 中将 ajax 数据发送到 php 控制器

Question

大家好，我是 symfony 2 的新手，我对使用 ajax 向 symfony 2 中的 php 控制器发送数据感到困惑。我想用谷歌地图创建项目，所以我创建了 MapController：

   <?php

namespace AppBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\JsonResponse;
class MapController extends Controller
{ 
    /**
     * @Route("/", name="homepage")
     */
    public function indexAction(Request $request)
    {
        // replace this example code with whatever you need
        return $this->render('map/map.html.twig', [
            'base_dir' => realpath($this->getParameter('kernel.root_dir').'/..').DIRECTORY_SEPARATOR,
            'contData' => ['lat' => '51.24591334500776', 'lng'=> '22.56967306137085']
        ]);
    }


    public function saveAction(Request $request)
    {
        $data = $request->request->get('params');

         return new JsonResponse(['data' => $data], Response::HTTP_OK);
    }

}

然后我创建路由：

    app:
    resource: '@AppBundle/Controller/'
    type: annotation
map:
    path:      /map
    defaults:  { _controller: AppBundle:Map:index }
    requirements:
        page: '\d+' 
map_save:
    path:      /map/save
    defaults:  { _controller: AppBundle:Map:save }
    methods:  [POST] 

所以当我去路线时：

http://localhost/googlemap/web/app_dev.php/map

我显示我的模板 map.html.twig

我有 javascipt 函数，我试图将 ajax 数据发送到某个控制器：

    marker.addListener("click", function () {


                    //!
                    var http = new XMLHttpRequest();
                    var url = "map/save";
                    var params = marker.position.lat();
                    http.open("POST", url, true);

//Send the proper header information along with the request
                    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                    http.onreadystatechange = function () {//Call a function when the state changes.
                        if (http.readyState == 4 && http.status == 200) {
                            alert(http.responseText);
                        }
                    }
                    http.send(params);

但我在此响应中有 NULL： {“数据”：null}

Answer 1

你需要问问自己你想用 JS 发送的这些数据做什么。如果它与地图功能有关，那么在 MapController 中创建一个新方法似乎很好。如果它与地图无关，那么创建一个新控制器可能是一个好方法。

方法和控制器的命名应该与您正在做的事情相关。您的 saveData 示例并不那么明显。如果您要保存坐标，则可以将此方法命名为 saveCoordinatesAction 并定义仅支持 POST 请求的专用路由。

至于将 URL 传递给 JS，请查看 FOSJsRoutingBundle - 它可以让您直接从 JavaScript 生成特定路由。