AJAX / PHP / JQuery Обновление HTML и Google Map

Question

Справочная информация: У меня есть простая карта Google с формой HTML прямо под ней. Когда форма заполнена и отправлена ​​через AJAX в PHP-скрипт, который выполняет несколько вызовов API, которые возвращают некоторые данные. Из этих данных я создаю простую таблицу HTML, но я также могу создать новый массив информации о местоположении (Lat, Long). В случае успеха таблица HTML возвращается и отображается под исходной формой. НО ... ВОПРОС: Как сначала получить массив PHP обратно на исходную страницу со страницы обработки и как запустить карту для обновления и использования этого массива?

Форма MAP и HTML с DIV. Данные AJAX возвращаются до сих пор:

 <div style="width:900px;height:400px;">
<!--THIS IS WHERE THE MAP IS LOADED -->
        <div id="map"></div>
       <script>

          var map, infoWindow;
//INITIAL FUNCTION TO LOAD MAP
          function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: -34.397, lng: 150.644},
              zoom: 6
            });
        </script>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBo91GktBc-I_zZxbWZ8dKKVyR6w77PSk&callback=initMap"></script>

        </div>

        <!--SEARCH FORM THAT IS POSTED VIA THE AJAX FUNCTION BELOW -->
        <div class="page-wrapper bg-img-1 p-t-165 p-b-100">
            <div class="wrapper wrapper--w720">

                <div class="card card-3">
                    <div class="card-body">
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab1">
                                <form  id="CoreSearchForm">

                                       <input type="hidden" name="search-type" value="songkick"/>
                                    <div class="input-group">
                                        <label class="label">Going to</label>
                                        <input class="input--style-1" type="text" name="address" id="address" placeholder="Zipcode" required="required">
                                        <i class="zmdi zmdi-pin input-group-symbol"></i>
                                    </div>
                                    <div class="row row-space">
                                        <div class="col-2">
                                            <div class="input-group">
                                                <label class="label">Start Date</label>
                                                <input class="input--style-1" type="text" name="input-start" placeholder="mm/dd/yyyy" id="input-start">
                                                <i class="zmdi zmdi-calendar-alt input-group-symbol"></i>
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="input-group">
                                                <label class="label">End Date</label>
                                                <input class="input--style-1" type="text" name="input-end" placeholder="mm/dd/yyyy" id="input-end">
                                                <i class="zmdi zmdi-calendar-alt input-group-symbol"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <button class="btn-submit" type="submit" id="searchFormSubmit">search</button>
                                </form>
            <div class="return_data"></div>
        </div>

Простой скрипт AJAX Call to PHP:

//SIMPLE AJAX FUNCTION THAT POST TO THE ADMIN-AJAX.PHP FILE. THE SUCCESS IS WHERE
//I WANT TO LOAD THE HTML THAT IS CREATED BY THE PROCESSING SCRIPT AS WELL AS UPDATE
//THE MAP WITH NEW MARKERS USING AN ARRAY CREATED BY THE PROCESSING SCRIPT
    jQuery(document).ready( function($) {
        $("#searchFormSubmit").click(function() {
            event.preventDefault();
            console.log("In First Part of Search Submit!");
            var address = $('#address').val();
        $.ajax({
                url : the_ajax_script.ajaxurl,
                type : 'post',
                data : {
                    action : 'travel_app_ajaxdata',
                    thangs : $('#CoreSearchForm').serialize()
                },
                success : function( response ) {
                     console.log("This is my response" + response);
                    $('.return_data').html(response);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) { 
            alert("Status: " + textStatus); alert("Error: " + errorThrown); 
            } 
            });
        });
    });

Мой PHP-скрипт обработки, содержащий два фрагмента данных, мне нужны и HTML, и массив:

    public  function travel_app_ajaxdata( ){


                //Grab Post Search Data and Save to Variables

                $formdata = array();
                parse_str($_POST['thangs'], $formdata);
                $startDate = false;
                $endDate = false;

                    if (isset($formdata['input-start'])){
                        $startDate = true;
                        $startDate_mdy = $formdata['input-start'];
                        $startDate_ymd = date("Y-m-d", strtotime($formdata['input-start']));
                    }else{
                        $startDate = true;
                        $startDate_mdy = "";
                        $startDate_ymd = "";
                    }

                    if (isset($formdata['input-end'])){
                        $endDate = true;
                        $endDate_mdy = $formdata['input-end'];
                        $endDate_ymd = date("Y-m-d", strtotime($formdata['input-end']));

                    }else{
                        $endDate = true;
                        $endDate_mdy = "";
                        $endDate_ymd = "";
                    }

                //BELOW IS WHERE AN API IS CALLED, THE DATA RETURNED IS PARSED
//INTO HTML AND FINALLY THERE IS A CLASS THAT USES THAT DATA AND BUILDS A NEW
//ARRAY OF LATITUDE AND LONGITUDE VALUES. BOTH PIECES OF DATA NEED TO MAKE IT BACK
//TO THE ORIGINAL PAGE. 
                if ($formdata['search-type'] == "songkick"){

                    $songKickParm = array("address" => $formdata['address'], "start-date" => $startDate_ymd, "end-date" => $endDate_ymd );
                    //var_dump($songKickParm);
                    $songKick = new Travel_PreAPI_Cleanup();

                    //I NEED BOTH OF THE FOLLOWING PIECES OF DATA ONE IS HTML THE OTHER IS AN ARRAY
            $songKickFinal = $songKick->preSongKick_API($songKickParm);
            $songKickArray = $songKick->preSongKick_location($songKickParm);

                }

                echo $songKickFinal;

                exit;
    }

Вы увидите выше, я только повторяю HTML (который работает). Но я должен поместить оба куска данных в массив и, если да, как мне обработать это, чтобы обновить карту Google на другом конце?

Answer 1

Вы можете использовать json_encode для массива

$return = array(“html” => [HTML], “data” => [ARRAY]);

json_encode($return, JSON_HEX_QUOT | JSON_HEX_TAG);

Тогда вы можете разобрать его с помощью jQuery.

success : function( response ) {
    var return_ = $.parseJSON(response)
    console.log(return_);
}