需要ajax调用来返回json数组并执行javascript函数

时间:2015-05-24 16:41:57

标签: jquery ajax json wordpress google-maps

首先,我应该澄清这是在Wordpress中。我在返回一个json数组并使用该json数组执行javascript函数时遇到了麻烦。我目前在数据库中有8个项目的列表。每个项目都有标题,纬度,经度,状态(完整或不完整),工业(即石油,汽油等)和州。 ajax调用基于状态,行业和状态的三个下拉菜单执行。然后,ajax调用基于该条件创建新的wp_query,然后替换页面上的项目列表。一切正常。

但是,该列表也对应于谷歌地图。页面加载时,所有项目都在地图上有标记。每当ajax过滤发生时,我需要删除并用新列表替换这些标记。这是我需要json数组以便将标记添加到地图的地方。我只是无法弄清楚如何返回json数组,然后在javascript函数中使用它来添加标记。

以下是ajax电话:

$( "#states" ).change(function() {

        // Get values from all three dropdown menus
        var state = $('#states').val();
        var markets = $('#markets').val();
        var services = $('#services').val();

        $('#project-list').fadeOut();

        // This does the ajax request
        $.ajax({
            url: ajaxurl, 
            data: {
                'action' : 'json_info',
                'state' : state,
                'status' : markets,
                'services' : services
            },
            success:function(data) {
                // This outputs the result of the ajax request
                $('#project-list').html( data );
                $('#project-list').fadeIn();
               // this is where I get lost
               addMarkers(data);

            }   /*,
            error: function(errorThrown){
                console.log(errorThrown);
            }*/
        }); // end of ajax call

    }); // end of click function

在json_info动作中,我有以下内容:

function json_info() {

    // The $_REQUEST contains all the data sent via ajax
    if ( isset($_REQUEST) ) {

....

    // create a new array to store projects
    $projectsArray = array();

        // query results by page template
        $my_query = new WP_Query($pages);

....        

        if($my_query->have_posts()) : 

                while($my_query->have_posts()) : 
                    $my_query->the_post();  

                    // $projects array is filled with the results of the query loop
                    $projectsArray[] = array(
                    'title' => get_the_title(),
                    'lat' => get_field('latitude'),
                    'long' => get_field('longitude'),
                    'status' => get_field('status'),
                    'industry' => get_field('industry'),
                    'state' => get_field('state')
                    //'num' => $n
                    );  

                    // this outputs each title into a list
                    echo '<li>'.the_title().'</li>';

            endwhile; endif;

         } // end of isset

         ?>

         <script>
                // set jqueryarray before the ajax file in order to parse the PHP, I'm not sure if this is correct???
                var myjsonarray = <?php echo json_encode($projectsArray); ?>;
            </script>

         <?php
         // I'm not sure if this is correct???        
         echo json_encode($projectsArray);

    // Always die in functions echoing ajax content
   die();
} 

我为了节省空间而浓缩了这个功能。所以我只是设置变量的位置,以及设置wp_query args的位置,因为一切正常。

所以问题是,如何输出标题列表,同时返回json数组?然后使用该json数组执行javascript函数在地图上添加标记?我知道如何使用json信息添加标记,而不是如何在ajax成功调用的javascript函数中访问它。任何帮助将不胜感激,因为我在搜索完所有答案后被困住了。

编辑:添加下面的照片,以显示当我同时回显标题列表以及json编码数组时会发生什么。我确实需要像这样输出标题的列表项,但我不希望json数组回显到屏幕。我只需要能够在ajax成功调用中访问它以执行javascript函数。Website Screenshot

1 个答案:

答案 0 :(得分:1)

我希望这会有用

您可以使用函数JSON.parse(data)管理JSON文件,例如

  var = jsonData JSON.parse (date);

通过这种方式,在变量jsonData中,您将按照在JSON文件中组织的相同方式组织所有信息

yourTitle = jsonData.title;
yourLat = jsonData.lat;

等等