Question

请大家，有一些我从我的数据库输出的帖子，现在我想为每个帖子做一个评论表格，表格将通过ajax方法提交，但我的问题是

ajax方法仅适用于第一个输出的帖子，表单将mysqli_num_rows($query)插入数据库。即如果mysqli_num_rows($query) = 5，表单将在数据库中插入5行。
单击提交按钮时，剩余的输出表单将重新加载页面。

这就是我想要实现的目标：

我希望在不重新加载的情况下提交每个表单。

我希望每个表单只插入一行。这是我的代码：

<?php

$con = mysqli_connect('localhost', 'root', '') or die ('error');

mysqli_select_db($con, 'test') or die ('error');

$query = mysqli_query($con, "SELECT * FROM testing");
while($sql = mysqli_fetch_array($query)){
    $id = $sql['id'];
    $post = $sql['post'];

    echo "<p>".$id.". ".$post."<br>";
    $pop_id = $id."pop";    
?>
<style>
.plop {
    display:none;
    height:200px;
    border-bottom:1px solid #000;
}
</style>
    <a href="javascript:;" style="float:right
    ;margin:20px 20px;" onclick="document.getElementById('<?php echo $pop_id; ?>').style.display='block'">comment</a></p><br>
<div id="<?php echo $pop_id; ?>" class="plop">
<a href="javascript:;" style="float:right;margin:20px 20px;" onclick="document.getElementById('<?php echo $pop_id; ?>').style.display='none'">close</a>
<script type="text/javascript" src="jquery.js"></script>
<form id="my-form">
    <input type="text" id="comment" name="comment" />
    <input type="hidden" id="post" name="post" value="<?php echo $id; ?>" />
    <input type="submit" id="submit" value="post" />
</form><div id="tutorial"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#my-form').submit(function(e) {
            e.preventDefault();
            $.ajax({
                method: "GET",
                url: "dote.php",
                data: $(this).serialize(),
                beforeSend: function(){
                    $('#tutorial').html("<img src='progress-dots.gif' />");
                },
                success: function(status) {
                    $('#post').val('');
                    $('#tutorial').html("");
                }
            });
        });
    });
</script>

</div>

<?php

}

?>

Answer 1

将输入类型=“提交”更改为type =“button”并在点击按钮时创建ajax。例如：

<script type="text/javascript" src="jquery.js"></script>
<form id="my-form">
    <input type="text" id="comment" name="comment" />
    <input type="hidden" id="post" name="post" value="<?php echo $id; ?>" />
    <input type="button" id="submit" value="post" />
</form><div id="tutorial"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#submit').click(function(e) {
            e.preventDefault();
            $.ajax({
                method: "GET",
                url: "dote.php",
                data: $("#my-form").serialize(),
                beforeSend: function(){
                    $('#tutorial').html("<img src='progress-dots.gif' />");
                },
                success: function(status) {
                    $('#post').val('');
                    $('#tutorial').html("");
                }
            });
        });
    });
</script>

上面的代码会在不刷新页面的情况下发布数据。

Answer 2

试试这段代码

<?php

$con = mysqli_connect('localhost', 'root', '') or die ('error');

mysqli_select_db($con, 'test') or die ('error');

$query = mysqli_query($con, "SELECT * FROM testing");
while($sql = mysqli_fetch_array($query)){
    $id = $sql['id'];
    $post = $sql['post'];

    echo "<p>".$id.". ".$post."<br>";
    $pop_id = $id."pop";    
?>
<style>
.plop {
    display:none;
    height:200px;
    border-bottom:1px solid #000;
}
</style>
    <a href="javascript:;" style="float:right
    ;margin:20px 20px;" onclick="document.getElementById('<?php echo $pop_id; ?>').style.display='block'">comment</a></p><br>
<div id="<?php echo $pop_id; ?>" class="plop">
<a href="javascript:;" style="float:right;margin:20px 20px;" onclick="document.getElementById('<?php echo $pop_id; ?>').style.display='none'">close</a>
<script type="text/javascript" src="jquery.js"></script>
<form id="my-form-"<?php echo $id; ?>>
    <input type="text" id="comment" name="comment" />
    <input type="hidden" id="post" name="post" value="<?php echo $id; ?>" />
    <input type="submit" id="submit" value="post" />
</form><div id="tutorial"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#my-form-<?php echo $id; ?>').submit(function(e) {
            e.preventDefault();
            $.ajax({
                method: "GET",
                url: "dote.php",
                data: $(this).serialize(),
                beforeSend: function(){
                    $('#tutorial').html("<img src='progress-dots.gif' />");
                },
                success: function(status) {
                    $('#post').val('');
                    $('#tutorial').html("");
                }
            });
        });
    });
</script>

</div>

<?php

}

?>

通过ajax为每个ID提交表单

2 个答案: