Question

我在将id传递到ajax的api URL时遇到问题，当我单击a href标签时，对我的成功功能没有任何反应。

因此，首先我需要提取所有专辑，并且已经完成并且提取良好。所以代码就是这个。

获取所有相册的功能：

    $(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。

用于将特定图像获取到相册的功能。

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

因此，我提供补救措施以验证该值是否返回，我使用preventDefault可以正常工作，但是当我的浏览器转到第二页时。 ID令人耳目一新..这就是为什么我无法获得响应，所以它将如何解决。？

e.preventDefault();

Answer 1

要获取属性data-attr-gallery-id的内容，您必须使用

$(this).attr("data-attr-gallery-id")

或.data（）（如果您使用更新的jQuery> = 1.4.3）

$(this).data("attr-gallery-id")

Answer 2

如果您的代码是通过JAvascript动态插入到DOM中的，那么您必须按如下所述更正代码

<a href="/peoplegallery_album/'+gallery_id+'" class="clicked_albums" data-id='+gallery_id+' style="color:black; font-weight: 500;">'+gallery_content_title+'</a>

因为您已通过ID绑定了点击事件。通过ID，它将绑定与ID匹配的第一个元素上的事件。因此，必须使用class来对多个元素进行绑定单击事件。

您的JS代码应该是

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

我还看到在服务器端PHP代码功能上，我可以看到一个关于返回值的错误。它从您未调用输出函数的地方返回值。

public function peoplegallery_album($id)
{
    $url_id = $id;
    $get_image = DB::select('SELECT cid,image,created_at FROM album_category WHERE cid = ?',[$url_id]);
    echo $url_id;
    die();
    return $url_id;
}

如何使用jQuery获取单击的href标签的数据属性

2 个答案: