在Laravel中使用Ajax/jQuery从数据库获取数据

我想从数据库中获取数据（经度/纬度），并使用Ajax调用将其返回到Google地图上绘制多个标记

下面是包含ajax的javascript：

<script type='text/javascript'>

            (function(){

                var map,marker,latlng,bounds,infowin;
                /* initial locations for map */
                var _lat=5.441771999999999;
                var _lng=100.2936793;

                var id=1;

                function showMap(){
                    /* set the default initial location */
                    latlng={ lat: _lat, lng: _lng };

                    bounds = new google.maps.LatLngBounds();
                    infowin = new google.maps.InfoWindow();

                    /* invoke the map */
                    map = new google.maps.Map( document.getElementById('gmap'), {
                       center:latlng,
                       zoom: 15
                    });

                    /* show the initial marker */
                    marker = new google.maps.Marker({
                       position:latlng,
                       map: map,
                       title: 'Hello World!'
                    });
                    bounds.extend( marker.position );


                   $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $.ajax({
                        type: 'GET',
                        url: '{{route("voyager.dashboard")}}',
                        data: {id:id},
                        success: function (response){

                           $.each(response, function( i,item ){
                                /* add a marker for each location in response data */ 
                                addMarker( item.latitude, item.longitude, item.location_status );
                            });
                        },
                        error: function(){
                            alert('There was an error loading the data.');

                        }
                    });                 
                }

                /* simple function just to add a new marker */
                function addMarker(lat,lng,title){
                    marker = new google.maps.Marker({/* Cast the returned data as floats using parseFloat() */
                       position:{ lat:parseFloat( lat ), lng:parseFloat( lng ) },
                       map:map,
                       title:title
                    });

                    google.maps.event.addListener( marker, 'click', function(event){
                        infowin.setContent(this.title);
                        infowin.open(map,this);
                        infowin.setPosition(this.position);
                    }.bind( marker ));

                    bounds.extend( marker.position );
                    map.fitBounds( bounds );
                }

                document.addEventListener( 'DOMContentLoaded', showMap, false );
            }());
        </script>

我尝试了console.log（response），它显示了整个javascript代码

当前没有“数据类型：'json'”的错误显示“未捕获类型错误：无法使用'in'运算符搜索'length'…”

我一直在尝试：

$.each(JSON.parse(response), function( i,item )

错误显示为“Uncaught SyntaxError:Unexpected token<在JSON.parse（）的位置0处的JSON中…”

这是api.php上的路径：

Route::group(['middleware' => ['api']], function () {
    Route::get('/', ['uses' => 'VoyagerController@_index',   'as' => 'voyager.dashboard']);
});

我不熟悉ajax/jQuery。这是我第一次使用它。希望有人能帮助我。

---

提前感谢您。

将您的功能更改为

public function googleMarkers(Request $request)
    {
        $locations = Location::select('latitude','longitude','location_status')->get();

        return response()->json($locations);
}

你去的路线

Route::post('/', ['uses' => 'VoyagerController@googleMarkers',   'as' => 'gooogle.markers']);

因此，您的ajax调用

$.ajax({
   type: 'POST',
   url: '{{route("google.markers")}}',
   data: {id:id},

---

首先，在控制器中的

$locations

声明下，添加以下行：

return response（）->json（$locations）。您还可以在ajax调用和路由
route:：Post（
/google\u markers'）中访问PostVoyagerController@googleMarkers'）->name（'google.markers'），将您的ajax url调用也更改为'google.markers'。路由到“/”可能根本就不会让您访问api调用。因此，将控制器代码移动到一个
公共函数googleMarkers
。您不使用您发送的id，但现在还可以。请分开你的代码，它成功了！我花了一个星期才解决这个问题。我更改了控制器的返回，然后更改了路由的方法和名称。但我仍然在路由中使用“/”，因为谷歌地图应该在用户登录后显示在我的仪表板上，url将是。我想路径名“voyager.dashboard”已经由我使用的管理面板包定义了。谢谢很高兴听到这个消息，所以让我定义一个完整的答案，这样您就可以声明它是正确的。作为说明，您仍然没有使用send
id
，并且使用
'/'
作为ajax请求的url路由是有风险的。将其更改为
“/google\u markers”
不会有任何影响，因为您的ajax url调用是在javascript中动态设置的。好的，谢谢！顺便说一句，我可以知道为什么我不能使用GET方法吗？在这种情况下，它不能使用，因为请求的基本url是
“/”
。但是任何发送到/页面的post请求都将被视为google.markers ajax调用。这就是为什么除了
“/”
，您应该为路由提供任何内容的原因。在ajax调用中，最好使用POST，这样就不会将其误认为http GET。而且机器人不能意外地将ajax调用记录为HTTP请求。唯一的例外（可能）是搜索引擎robot可以记录的查询搜索（…？q=my%20search%string）。另一个原因是，在帖子中，您知道您的数据将完整到达。在一个示例中，所有内容都进入URL。对于没有问题的数值。但是文本呢？还是非UTF-8字符？简单地说，有了一个帖子，你肯定会收到你发送的东西。如果解码成URL，这种确定性就会消失。
$.ajax({
   type: 'POST',
   url: '{{route("google.markers")}}',
   data: {id:id},