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

我有谷歌地图和一个在地图顶部突出显示某个区域的矩形。该矩形的东北和西南纬度存储为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 %}

{%extends'base.html.twig%}
{%block body%}
var-ne；
var-sw；
函数myMap（）{
map=new google.maps.map（document.getElementById（'map'），{center:{lat:6.911918，lng:79.892780}，
缩放：9
});
变量界限={
北：7.011918，
南：6.811918，
东区：79.992780，
西：79.792780
};
//定义矩形并将其“可编辑”属性设置为true。
矩形=新的google.maps.rectangle({
界限:界限,，
是的，
德拉格布尔：是的
});
矩形.setMap（map）；
//在矩形上添加事件侦听器。
rectangle.addListener（'bounds_changed'，showNewRect）；
//在地图上定义一个信息窗口。
infoWindow=new google.maps.infoWindow（）；
}
//在信息窗口中显示矩形的新坐标。
/**@this{google.maps.Rectangle}*/
函数showNewRect（事件）{
var ne=rectangle.getBounds（）.getNorthEast（）；
var sw=rectangle.getBounds（）.getSouthWest（）；
地图：北纬=2.33；
var contentString='已移动矩形。
'+
“新东北角：”+ne.lat（）+”，“+ne.lng（）+”
”+
“新西南角：”+sw.lat（）+”、“+sw.lng（）”；
//设置信息窗口的内容和位置。
setContent（contentString）；
设置位置（ne）；
打开（地图）；
//window.location.href=“Controller/SatelliteImages_Controller.php？w1=“+ne+”&w2=“+sw；
返回（东北+西南）；
}
{%endblock%}

---

请原谅我的语法不好。我不熟悉PHP和Symfony。

假设您的代码正常工作，您可以使用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>

如果执行此操作，则必须配置jquery AJAX函数以接收json数据：

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

---

我试试看，但我怎么打电话给调度员？我想在单击查看按钮时在新页面上显示neSw变量的值。有什么想法吗？然后您可以通过GET

window.location.href=“myaction/”+ne+“/”+sw

并在控制器中创建您的路由以接收您的VAR

@route（“/myaction/{ne}/{sw}”，name=“route_name”）

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