Question

我正在尝试构建与PHP AJAX不同的系统。我差不多完成了，但我想这样做的方式并不正确。

以下是代码：

<?php $query=mysqli_query($conn,"SELECT * FROM posts");
    while($data=mysqli_fetch_array($query)){

 ?>         
 <table border="1" width="50%" align="center" style="margin-top: 20px;">
    <tr>
        <td> 
            <!-- Name -->
            <strong><?php echo $data["author"] ?></strong>
        </td>
    </tr>
    <tr>
        <td>
            <!-- post content -->
            <?php echo $data["content"]; ?>
        </td>
    </tr>
    <tr>
    <td> 
        <input type="hidden" value="<?php echo $data["id"]; ?>" id="like<?php echo $data["id"]; ?>">
        <button type="submit" id="likebtn<?php echo $data["id"]; ?>">Like</button></td>
    </tr>
</table>

<script type="text/javascript">
    $(document).ready(function() {
        //displaydata();
        // body...

        $("#likebtn"+<?php echo $data["id"]; ?>).click(function(){
            var like= $("#like"+<?php echo $data["id"]; ?>).val();


            $.ajax({
                url: "ajax.php",
                type:"POST",
                async:false,
                data:{
                    "done":1,
                    "id" : like,
                },
                success:function(data){
                    //displaydata();
                    //$("#like").val('');
                }
            });


        }); 

    });
</script>

<?php } ?>

问题是AJAX代码在循环中，所以如果有多个帖子，代码重复多次，我不想要，如果我把AJAX代码放在循环之外，那么只有第一个按钮数据是执行因为ID与所有帖子相同。我可以为每个帖子创建一个动态ID但是如何在AJAX中使用动态ID？

Answer 1

在您的情况下，您可以为每个动态按钮使用类

所以你的代码

var connect = require('connect');
var http = require('http');

function doFirst(request, response, next) {
    console.log('bacon');
    next();
}

function doSecond(request, response, next) {
    console.log('tuna');
    next();
}
app.use(doFirst);
app.use(doSecond);

var app = connect();
http.createServer(app).listen(8080);

应该是

<button type="submit" id="likebtn<?php echo $data["id"]; ?>">Like</button></td>

你可以在像这样的ajax中使用它

<button type="submit" class="btnSubmit" id="likebtn<?php echo $data["id"]; ?>">Like</button></td>

Answer 2

由于您未通过表单提交，因此您无需声明name属性，也不需要type="submit"。您甚至不需要声明id或class。您可以向所有onclick代码撰写<button>个活动，并使用data-id访问最佳/逻辑地存储在this属性中的动态数据。

首先在你的php循环中构建你的按钮，如下所示：

echo "<button data-id=\"{$data['id']}\">Like</button>";

这应输出类似于此的html：

<button data-id="1">Like</button>
<button data-id="2">Like</button>
<button data-id="3">Like</button>
<button data-id="4">Like</button>

在你的javascript中，（在加载页面之后）你可以编写你的事件函数：

$("button").on("click", function(){
    $.ajax({
        url: "ajax.php",
        type:"POST",
        async:false,
        data:{
            "done" : 1,
            "id" : $(this).data("id")
        },
        ...
    });
});

这是一个小小的jsfiddle演示：https://jsfiddle.net/xpvt214o/20542/

如何获取输入类型的动态ID？

2 个答案: