如何在PHP循环中通过jQuery读取自定义属性获取AJAX响应

问题排查及修正方案 #

你当前代码的核心逻辑是通顺的，无法正常运行大概率是以下几个常见细节问题导致，对应修改即可：

• ID冲突与规范问题：你按钮的id属性循环输出时固定写了id="show<?php echo "1";?>"，所有按钮id重复属于HTML规范错误，建议修改为id="show<?php echo $rev->id; ?>"保证唯一。另外div的id直接用$rev->id如果是数字开头，在部分旧浏览器存在兼容问题，建议加统一前缀避免冲突。
• 隐藏元素后未恢复显示：你在请求前执行了$('#' + review).hide();，但请求成功后只修改了内容没有调用.show()，会导致返回的数字渲染后用户看不到。
• 按钮类型错误：你把按钮type设为了submit，如果按钮放在form标签内会触发默认表单提交，导致页面刷新打断AJAX请求，建议改为type="button"。
• 如果一定要用.attr()方法读取自定义属性：把取值逻辑替换为以下写法即可：

var vote = $(this).attr('data-datac');
var review = $(this).attr('data-datacr');
var CoinId = $(this).attr('data-datacoin');
var symbol = $(this).attr('data-datasymbol');
var WalletAddress = $(this).attr('data-datacw');

• 动态渲染兼容：如果你的按钮是页面加载后动态追加的（比如分页加载更多内容），需要把事件绑定改成委托模式，避免新增的按钮没有绑定点击事件。

修正后完整可运行代码参考 #

循环内的HTML/PHP部分

<?php foreach($你的遍历变量 as $rev): // 补充你自己的循环遍历逻辑 ?>
<button class="btn likebutn_r" 
        data-datac="1" 
        data-datacw="<?php echo $WalletAddress; ?>" 
        data-datacr="<?php echo $rev->id; ?>" 
        data-datacoin="<?php echo $rev->coin_id; ?>" 
        data-datasymbol="<?php echo $rev->symbol; ?>" 
        id="show<?php echo $rev->id;?>"  
        value="1" 
        type="button">
  <img src="<?php echo base_url(); ?>/assets/img/thumb.png" height="24" width="24">
</button>
<div id="vote_<?php echo $rev->id; ?>">12(dynamic)</div>
<?php endforeach; ?>

AJAX脚本部分

<script type="text/javascript">
    $(document).ready(function () {
        // 事件委托写法兼容动态加载的按钮
        $(document).on('click', '.btn.likebutn_r', function (e) {
            e.preventDefault();
            // 用attr读取自定义属性
            var vote = $(this).attr('data-datac');
            var review = $(this).attr('data-datacr');
            var CoinId = $(this).attr('data-datacoin');
            var symbol = $(this).attr('data-datasymbol');
            var WalletAddress = $(this).attr('data-datacw');

            var $targetDiv = $('#vote_' + review);
            $targetDiv.hide();
            
            $.ajax({
                type: 'POST',
                url: '<?php echo base_url();?>main/AddVote',
                data: {
                    vote: vote,
                    review: review,
                    CoinId: CoinId,
                    symbol: symbol,
                    WalletAddress: WalletAddress
                },
                success: function (data) {
                    // 去掉返回值多余的空格换行
                    data = data.trim();
                    $targetDiv.html(data).show();
                },
                error: function() {
                    alert('请求失败，请刷新重试');
                    $targetDiv.show();
                }
            });
        });
    });
</script>

内容的提问来源于stack exchange，提问作者amit