https://docs.mapbox.com/help/demos/directions/final.html

Bu linkteki verileri almak ıstıyorum

 
    const styleSpecBox = document.getElementById('harita');
    styleSpecBox.innerHTML = `${syntaxHighlight(
        JSON.stringify(event.route, null, 2)
    )}`;
 

bu kod harıta verısını ekrana basıyor ama ben ekrana basmak yerıne alttakı kod ıle post etmek ıstıyorum nasıl yaparım acaba

alttakı koda nasıl dahıl eder json verısını post ederım

Yardım edene starbucukkks tan kahve :)

map.on('load', () => {
 directions.on('route', (event) => {
    $.ajax({
        url: "test.php",
        type: "POST",
        proccessData: true,
        dataType: "JSON",
        success: function (json) {
             
            // Add a new source from our GeoJSON data 
            map.addSource('route', {
                type: 'geojson',
                data: json
            });
 
        },
        error: function(xhr, status, error){
            var errorMessage = xhr.status + ': ' + xhr.statusText
            //alert('Error - ' + errorMessage);
        },
    });
});	
});	

kodun orjınalı

 
      mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg';
      const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-79.4512, 43.6568],
        zoom: 13
      });

      const directions = new MapboxDirections({
        accessToken: mapboxgl.accessToken,
        steps: false,
        geometries: 'polyline',
        controls: { instructions: false }
      });

      map.addControl(directions, 'top-left');

      // After the map style has loaded on the page, add a source layer and default
      // styling for a single point.
      map.on('load', () => {
        // Listen for the `directions.route` event that is triggered when a user
        // makes a selection and add a symbol that matches the result.
        directions.on('route', (event) => {
          const styleSpecBox = document.getElementById('json-response');
          styleSpecBox.innerHTML = `${syntaxHighlight(
            JSON.stringify(event.route, null, 2)
          )}`;
        });
      });

      function syntaxHighlight(json) {
        json = json
          .replace(/&/g, '&')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;');
        return json.replace(
          /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g,
          (match) => {
            let cls = 'number';
            if (/^"/.test(match)) {
              if (/:$/.test(match)) {
                cls = 'key';
              } else {
                cls = 'string';
              }
            } else if (/true|false/.test(match)) {
              cls = 'boolean';
            } else if (/null/.test(match)) {
              cls = 'null';
            }
            return `<span class="${cls}">${match}</span>`;
          }
        );
      }