PHP& AJAX删除仅适用于第一行

时间:2017-09-04 15:16:32

标签: php jquery ajax

我制作了一个简单的PHP博客系统。在“添加帖子”页面下,用户可以给出标题和正文。帖子位于帖子页面上,用户可以在其中删除帖子。

我的问题是:只能删除第一篇文章。其他没有。

以下是我展示帖子的代码:

<?php
$database->query('SELECT * FROM posts');  
$rows = $database->resultSet();
?>

<div class="container">
 <?php foreach ($rows as $row) : ?>
 <h2><?php echo $row['title']; ?></h2>
 <p><?php echo $row['body']; ?></p>
 <small><?php echo $row['create_date'] ?></small>
 <form method="post">
  <input  id="deleteid" type="hidden" name="delete_id" value="<?php echo 
  $row['id'] ?>">
  <input id="delete_button" class="btn btn-primary" type="submit" 
   name="delete" value="Delete">
 </form>
 <?php endforeach; ?>
 <br><br>
</div>

这是我的AJAX代码:

$("#delete_button").click(function () {
    $.ajax({
      type: "POST",
      url: "?action=delete",
      data: "delete_id=" + $("#deleteid").val(),
      success: function (result) {
        if (result == 1) {
          //window.location.assign("views/posts.php");
        } else {
          alert("Error");
        }
      }
    });
  });

1 个答案:

答案 0 :(得分:1)

您不能对多个input / div或任何其他HTML标记使用相同的ID。请将id =“deleteid”更改为class =“deleteid”,并更改您的点击事件。所以你的这一行将改为 -

$(".delete_button").click(function () {
    var deleteid = $(this).data('deleteid');
    $.ajax({
      type: "POST",
      url: "?action=delete",
      data: "delete_id=" + deleteid ,
      success: function (result) {
        if (result == 1) {
          //window.location.assign("views/posts.php");
        } else {
          alert("Error");
        }
      }
    });
  });

你的ajax代码将变为 -

<template>
<div>
    <transition name="fade" mode="out-in">

      <div class="ui active inline loader" v-if="loading" key="loading"></div>
      <div v-else key="loaded">
          <span class="foo" ref="foo">the content I'm after is here</span>
      </div>

    </transition>
</div>
</template>

<script>
    export default {
        data() {
            return {
                loaded: false
            }
        },
        mounted() {
            setTimeout(() => {  // simulate async operation
                this.loaded = true
                console.log($(this.$refs.foo).length, $(this.$el.find('.foo')).length)
            }, 2000)
        },
    }
</script>