Javascript AJAX/PHP/JQuery更新HTML和Google地图

背景：我有一个简单的谷歌地图，下面有一个HTML表单。当表单完成并通过AJAX提交给PHP脚本时，该脚本会执行一些API调用，从而返回一些数据。根据这些数据，我正在构建一个简单的HTML表，但我也可以创建一个新的位置信息数组Lat，Long。成功返回HTML表并显示在原始表单下方。 但是问题：如何首先将PHP数组从处理页面返回到原始页面，以及如何启动映射以更新和使用该数组

到目前为止，返回AJAX数据的是带有DIV的MAP和HTML表单：

 <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>

我的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地图？

你可以使用json\u 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_);
}

---

但是我需要成功地接收由处理脚本解析和构建的数组和html。

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