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

Posted 2023-02-24

【中文标题】在 Laravel 中使用 Ajax/jQuery 从数据库中获取数据

【英文标题】：Fetch data from database using Ajax/jQuery in Laravel

【发布时间】：2019-11-05 19:44:23

【问题描述】：

我想从数据库中获取数据（经度/纬度）并将其返回以使用 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>

在 ajax 设置中，当我输入“dataType:json”时，执行了函数错误。输出是警报“加载数据时出错”。

这是我的控制器：

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

        if( $locations ) 
            foreach( $locations as $location ) 
                $markers[]=array( 'latitude'=>$location->latitude, 'longitude'=>$location->longitude, 'location_status'=>$location->location_status );
            
            return json_encode($markers, JSON_FORCE_OBJECT);     
        

        return view('vendor.voyager.index');

我尝试了 console.log(response)，它显示了整个 javascript 代码。

当前没有“dataType:'json'”的错误显示“Uncaught TypeError: Cannot use 'in' operator to search 'length'...”

我已经试过了：

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

错误显示“Uncaught SyntaxError: Unexpected token

这是 api.php 的路由：

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

我不熟悉 ajax/jQuery。这是我第一次使用它。希望任何人都可以帮助我。 提前谢谢你。

【问题讨论】：

首先尝试，在你的控制器中$locations的声明下，添加这一行：return response()->json($locations);。您还可以在 ajax 调用中和您的路线Route::post(/google_markers'、'VoyagerController@googleMarkers')->name('google.markers') 中获取帖子，将您的 ajax url 调用更改为 'google.markers'也。路由到 '/' 可能永远不会让您首先进行 api 调用。所以将你的控制器代码移动到public function googleMarkers。你不使用你发送的 id，但现在没关系。请分开你的代码。

成功了！我花了一周的时间来解决这个问题。我更改了控制器的返回，然后对于路由我更改了方法和名称。但是我仍然在路线上使用'/'，因为谷歌地图应该在用户登录后显示在我的仪表板上，网址将是127.0.0.1:8000/admin。我认为路线名称“voyager.dashboard”已经由我使用的管理面板包定义。谢谢！

很高兴听到，所以让我定义一个完整的答案，这样你就可以宣布它是正确的。

【参考方案1】：

把你的函数改成

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,

【讨论】：

请注意，您仍然不使用发送id 并使用'/' 作为您的ajax 请求的url 路由是有风险的业务。将其更改为 '/google_markers' 不会有任何坏处，因为您的 ajax url 调用是在 javascript 中动态设置的。

好的，谢谢！顺便说一句，我可以知道为什么我不能使用方法 GET 吗？

在这种情况下它不能，因为请求的基本 url 是'/'。但是您将发送到 / 页面的任何发布请求都将被视为 google.markers ajax 调用。这就是为什么您应该为 Route 提供任何但 '/'。在 ajax 调用中最好使用 POST，这样它就永远不会被误认为是 http GET。而且机器人不会意外地将 ajax 调用记录为 HTTP 请求。唯一的例外（可能）是在查询搜索 (...?q=my%20search%string) 中可以由搜索引擎机器人记录。

在 POST 中您知道您的数据将一体到达的另一个原因。在 GET 中，所有内容都进入 URL。对于不成问题的数值。但是文字呢？还是非 UTF-8 字符？简而言之，通过 POST，您可以确定您发送的内容会收到。如果解码为 URL，这种确定性就会消失。