3

AJAX と Code Igniter を使用してデータベースからユーザーを削除しようとしています。削除リンクをクリックすると、ユーザーは削除されますが、ページはリダイレクトされ、成功メッセージが表示されます。私のコードでは AJAX が機能していないようです。HTML は次のとおりです。

<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Username</th>
<th>Password</th>
<th>Action</th>
</tr>
</thead>
<tbody>




<?php foreach($users as $u){?>
<tr>



<td><?php echo $u['id']; ?></td>



<td><?php echo $u['firstname']; ?></td>



<td><?php echo $u['lastname']; ?></td>



<td><?php echo $u['email']; ?></td>



<td><?php echo $u['username']; ?></td>



<td><?php echo $u['password']; ?></td>



<td>



<a href="#" >Edit</a>  |
<?php  $id=$u['id'];?>
<a  href="<?php echo site_url("users/delete/$id")?>" class="delete">Delete</a>



</td>
<?php }?>
</tr>



</tbody>
</table>

ここにAJAXがあります：

 $(document).ready(function(){

     $(".delete").click(function(){
       alert("Delete?");
         var href = $(this).attr("href");
         var btn = this;

        $.ajax({
          type: "GET",
          url: href,
          success: function(response) {

          if (response == "Success")
          {
             $(btn).closest('tr').fadeOut("slow");
          }
          else
          {
            alert("Error");
          }

       }
    });

   })
  });

最後に、Codeigniter でユーザーを削除するコントローラー関数

 public function delete($id)//for deleting the user
  {
    $this->load->model('Users_m');

    $delete=$this->Users_m->delete_user($id);
      if($delete)
        {
          echo "Success";
        }
     else
        {
          echo "Error";
        }

  }

どこで間違いを犯していますか？

4

6 に答える 6

4

ここですでに与えられている正しい答えを拡張するだけです。

基本的に、JS コードは次のようになります。

$(document).ready(function(){

 $(".delete").click(function(event){
     alert("Delete?");
     var href = $(this).attr("href")
     var btn = this;

      $.ajax({
        type: "GET",
        url: href,
        success: function(response) {

          if (response == "Success")
          {
            $(btn).closest('tr').fadeOut("slow");
          }
          else
          {
            alert("Error");
          }

        }
      });
     event.preventDefault();
  })
});

ここのevent.preventDefault()部分が重要です。要素をクリックすると、ブラウザがデフォルトのアクションを実行できなくなるためです。

リンクの場合は、hrefパラメーターで定義された URL にリダイレクトされます。これがあなたが見ているものです。

手動で定義したイベントは常に最初にトリガーされるため、実際には ajax リクエストが開始されますが、その直後にイベント ハンドラーでブラウザーがデフォルト アクションの処理を開始し、ajax リクエストを中断し、クリックされたリンクに移動します。

于 2013-04-21T06:54:54.387 に答える
0

イベントのデフォルト アクションはトリガーされません。

これにはevent.preventDefault()を使用します

于 2013-04-21T06:32:09.583 に答える
0

「btn」変数に正しいオブジェクトを設定していることを確認してください。

var btn = $(this);

これが問題かどうかを確認してください！ちなみに、次のセミコロンがありません：

 var href = $(this).attr("href")
于 2013-04-21T06:33:41.747 に答える
0 
$(".delete").click(function(e){
e.preventDefault();
...
于 2013-04-21T06:48:26.093 に答える
0

最初にhref属性を名前や値などの別の属性に変更します。これは、最初に読み込まれ、別のときに値がhrefに保存され、その後、ページを更新するためにこれを書き込むためです。

window.reload('true');

これはきっとあなたを助けるでしょう

于 2017-11-02T07:57:16.223 に答える