在单击按钮时将 twig 中的 javascript 变量传递给 php 控制器

Question

我有谷歌地图和一个矩形，突出显示地图顶部的某些区域。该矩形的东北和西南纬度存储为 JavaScript 变量 （ne，sw）。我想在单击按钮时将这些参数发送到 php 控制器，如下所示：

视图

我该怎么做？我对AJAX和JQuery都不了解。

{% extends 'base.html.twig' %}
{% block body %}
var ne;
var sw;
<a href="/highlighted/{{something}}" class="btn btn-success">View</a>
<div id="map" style="width:100%;height:500px"></div>

<script language="javascript" type="text/javascript">
function myMap() {
map = new google.maps.Map(document.getElementById('map'), {          center: {lat: 6.911918, lng: 79.892780},
    zoom: 9
  });
  var bounds = {
    north: 7.011918,
    south: 6.811918,
    east:  79.992780,
    west:  79.792780
  };
  // Define the rectangle and set its editable property to true.
  rectangle = new google.maps.Rectangle({
    bounds: bounds,
    editable: true,
    draggable: true
  });
  rectangle.setMap(map);
  // Add an event listener on the rectangle.
  rectangle.addListener('bounds_changed', showNewRect);
  // Define an info window on the map.
  infoWindow = new google.maps.InfoWindow();
}
// Show the new coordinates for the rectangle in an info window.
/** @this {google.maps.Rectangle} */
function showNewRect(event) {
  var ne = rectangle.getBounds().getNorthEast();
  var sw = rectangle.getBounds().getSouthWest();
  map.northLatitude=2.33;
  var contentString = '<b>Rectangle moved.</b><br>' +
      'New north-east corner: ' + ne.lat() + ', ' + ne.lng() + '<br>' +
      'New south-west corner: ' + sw.lat() + ', ' + sw.lng();
  // Set the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(ne);
  infoWindow.open(map);
    //window.location.href = "Controller/SatelliteImages_Controller.php?w1=" + ne + "&w2=" + sw;
    return (ne+sw);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyALi1Ro_johRtFp2JrLa9zGMLTwBMxBrHQ&callback=myMap"></script>
{% endblock %}

请原谅我的语法错误。我是PHP和Symfony的新手。

Answer 1

假设你的代码是工作的，你可以用jquery轻松地做到这一点：

<script language="javascript" type="text/javascript">
  $( document ).ready(function() {
    // Your script code here
    function showNewRect(event) {
      // Your code function here
      var neSw = {"data": {"ne": ne, "sw": sw}};
      $.ajax({
         url: 'Controller/SatelliteImages_Controller.php',
         type: "post",
         data: neSw
      })
      .done(function(responseData, status){
        console.log(responseData);
      })
      .fail(function(object, status){
        console.log("Error in Ajax response");
      });
    }  
  });          
</script>

因此，您将 var 通过 POST 发送到控制器ne sw。在控制器中，您可以通过请求对象获取它：$request->get('data');

如果需要，可以使用SymfonyComponentHttpFoundationJsonResponse;将响应数据发回 AJAX 函数以通知一切正常

在您的 Symfony 控制器中：

use SymfonyComponentHttpFoundationJsonResponse;
class YourController extends Controller
{
    public function yourAction() {
        $data = $this->getRequest()->get('data');
        var_dump($data); // Here you can see your vars sent by AJAX
        $dataResponse = array("error" => false); //Here data you can send back
        return new JsonResponse($dataResponse);
    }
}

如果这样做，则必须配置 jquery AJAX 函数以接收 json 数据：

    $.ajax({
       url: 'Controller/SatelliteImages_Controller.php',
       type: "post",
       data: neSw,
       dataType: 'json'
    })