有没有办法使用AJAX将响应结果传递到另一页

时间:2019-02-07 10:53:36

标签: javascript jquery laravel

我在使用ajax和laravel将结果传递到blade.php的另一页时遇到问题,

我有两个页面,

  1. 第一页http://localhost:8000/peoplegallery

  2. http://localhost:8000/peoplegallery_album/和ID

场景:

在第一页中,您可以在该页上看到相册列表

示例。

  1. 相册1/1
  2. 相册2/2
  3. 专辑3/3

示例输出。如果我单击ID为1的calgarey相册,其中的所有图像都必须发送到peoplegallery_album

Output first page

所以现在我的页面转移到了http://localhost:8000/peoplegallery_album/1

现在我转移了http://localhost:8000/peoplegallery_album/1之后出现了问题,为什么在响应时没有结果。

我的代码在我列出所有相册的第一页上,

    $(document).ready(function(){
    $.ajax({
        url:'http://localhost:8000/api/peoplegallery',
        dataType: "json",
        contentType: "application/json",
        success:function(response) {



            var peoplegallery = response[0].gallery_table;
            $.each(peoplegallery, function (index, el) {

                var stringify_list_gallery = jQuery.parseJSON(JSON.stringify(el));
                var gallery_file = stringify_list_gallery['file'];
                var people_gallery_image = '<img src=/storage/' + gallery_file + ' class="d-block w-100">';
                var gallery_id = stringify_list_gallery['content_id'];
                var gallery_content_title = stringify_list_gallery['content_title'];
                var gallery_event_dated = stringify_list_gallery['event_dated'];

                var peoplegallery_data;

                peoplegallery_data = 
                '<div class="col-md-4">\
                    <div class="card" style="margin-left:20px;">\
                        <img class="card-img-top" src="/storage/'+gallery_file+'" alt="Card image cap" style="height:200px;">\
                        <div class="card-body">\
                             <h5 class="card-tilte">\
                                <a href="/peoplegallery_album/'+gallery_id+'" class="clicked_albums" data-id='+gallery_id+' style="color:black; font-weight: 500;">'+gallery_content_title+'</a>\
                             </h5>\
                        </div>\
                        <div class="card-footer">\
                            <small class="text-muted"><i class="icon ion-md-calendar" style="font-size:15px; color:#800000;"></i><i class="far fa-calendar-check"></i> '+gallery_event_dated+'</small>\
                        </div>\
                    </div>\
                    <br><br>\
                </div>\
                ';

                $('#list_peoplegallery').append(peoplegallery_data);

            });


        },
        error:function(response) {
            console.log(response);
        }
    });
}); 

因此,现在我需要创建一个函数,以在单击后获取相册的属性ID,并将ID传递给我的api网址。一旦成功,结果将发送到peoplegallery_album / 1

这是我的代码

    $(document).ready(function(){   
    $(document).on('click','.clicked_albums',function(e) {
        var album_id= $(this).data('id');
        $.ajax({
            url:'http://localhost:8000/api/peoplegallery_album/'+ album_id,
            type:'get',
            dataType: "json",
            contentType: "application/json",
            success:function(response) {
                console.log(response);
            },
            error:function(response) {
                console.log(response);
            }
        });

    }); 
}); 

我的控制器看起来像这样,

    public function peoplegallery_album($id)
{


    $get_title = DB::select('SELECT content_title,event_place,DATE_FORMAT(event_date, "%M %d, %Y") as event_dated FROM content_structure WHERE content_id = ? AND status = ? ',[$id,'Active']);

    $get_image = DB::select('SELECT cid,image,created_at FROM album_category WHERE cid = ?',[$id]);



    return response()->json(array(['logic_title' => $get_title,'get_image' =>$get_image]));
}

我的api路由看起来像这样,

    Route::get('peoplegallery','api\UserController@peoplegallery');
Route::get('peoplegallery_album/{id}','api\UserController@peoplegallery_album');

1 个答案:

答案 0 :(得分:-1)

我认为您应该在获取相册的首页上获取相册ID