twigのjavascript変数をボタンをクリックするとphpコントローラに渡す

Question

私はGoogleマップとマップの上にいくつかの領域を強調する矩形を持っています。その長方形の北東と南西緯度はjavascriptの変数（NE、SW）として保存されている.Iはこのように、ボタンのクリックで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> 

ですから、あなたのコントローラにPOSTしてVARS neswを送ります。お使いのコントローラでは、あなたのリクエストオブジェクトによってそれを得ることができます：$request->get('data');あなたのsymfonyのコントローラでSymfony\Component\HttpFoundation\JsonResponse;

を使用して、あなたはすべてがOKだった知らせるために、AJAX機能に応答データを送り返すことができますしたい場合は

、：

あなたはJSONデータを受け取るためにあなたのjqueryのAJAX機能を設定するには、あなたが必要があります。これを行う場合は

use Symfony\Component\HttpFoundation\JsonResponse; 

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); 
    } 
} 

：

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