刪除記錄使用jquery ajax，但表再次加載

我正在刪除記錄使用jQuery和Ajax。我寫的代碼刪除了一條記錄，但是再次加載了HTML表，這意味着頁面刷新了我想要避免的內容。刪除記錄使用jquery ajax，但表再次加載

這裏是我的代碼：

comment.php

<script type="text/javascript"> 
$(document).ready(function(){ 
    function loadList(){ 
     $.ajax({ 
      url: "load_list.php", 
      cache: false, 
      success : function(html){ 
       $(".name_list").html(html); 
      } 
     }); 
    } 
    loadList(); 

    $("#Submit").click(function() { 
     if($(":text").val().length==0) 
      { 
       // $(this).next().html("Field needs filling"); 
       $(":text").after('<span class="errorkeyup">Field cannot be empty</span>'); 
       //return false; 
       success = false; 
      } 
      else 
      { 
       var name=$("#name").val(); 
       var message=$("#message").val(); 
       $.ajax({ 
        type:"post", 
        url:"save_list.php", 
        data:"name="+name+"&message="+message,        
        success:function(data){ 
       loadList();         
       } 
       }); 
       return false; 
      } 
    }); 
    $(".delete_button").on("click", function(){ 
     //this deletes the row clicked on with an alert and then reloads the list 
     var id = $(this).attr("id"); 
     /*var x=window.confirm("Are you sure you want to delete this item?") 
     if (x==true){*/ 
      $.ajax({ 
       type: "POST", 
       url: "delete.php", 
       data: "id="+ id, 
       success: function(){ 
        loadList(); 
       } 
      }); 
     // } 
     return false; 
    }); 

}); 
</script> 
</head> 

<body> 
<div id="form"> 

<form method="post" name="form" action=""> 
<div id="content"> 
Name : <input type="text" name="name" id="name" /> 
       </br> 
       Message : <input type="text" name="message" id="message" /> 
       </br> 
       </div> 
<input type="button" value="Submit" id="Submit"> 

</form> 
</div> 
<div class="name_list"></div> 

</body>

loadlist.php

<?php 
include('connection.php'); 
$sqlnew = 'Select * from login order by id ASC'; 
    $res = mysql_query($sqlnew); 
    echo'<table border="1">'; 
    echo'<tr>'; 
    echo'<td>SrNo.</td>'; 
    echo '<td>Name:</td>'; 
    echo '<td>Message:</td>'; 
    echo '<td>Delete</td>'; 
    echo'</tr>'; 
    $i=1; 
    while($row = mysql_fetch_array($res)) 
    { 
     echo '<tr>'; 
     echo'<td>'.$i.'</td>'; 
     echo'<td>'.$row['username'].'</td>'; 
     echo '<td>'.$row['message'].'</td>'; 
     echo"<td> 
      <a id='".$row['id']."' href=delete.php?id=".$row['id']."&type=Delete class=delete_button>Delete</a></td>"; 
     echo"<td> 
      <a id='".$row['id']."' href=comment.php?id=".$row['id']."&type=edit class=edit_button>Edit</a></td>";   
     echo '</tr>'; 
     $i++; 

    } 
    echo'</table>'; 

?>

delete.php

<?php 
include('connection.php'); 

    if(isset($_REQUEST["id"])) 
    { 
    $cmd=mysql_query("delete from login where id=" .$_REQUEST["id"] .";"); 
    header("location: comment.php"); 
    } 

?>

來源

2013-04-13 chithon

安全漏洞在這段代碼中存在 – Daedalus

'頭（位置...）'重定向頁面 –

當您提交時，您希望在頁面上發生什麼？您是否希望它重新加載表格（以顯示記錄已被刪除）？現在發生什麼錯誤，是整個頁面重新加載？ – tcovo

當你做$.ajax()呼叫$('.delete_button')，你不應該在那裏調用你的loadList()函數，因爲這是重新加載表，而應該刪除表中刪除的一個條目。

也許你可以用類似這樣的東西刪除它，放在刪除按鈕成功回調中：

$.ajax({ 
    type: "POST", 
    url: "delete.php", 
    data: "id="+ id, 
    success: function() 
    { 
     $(this).parent().parent().remove(); 
    } 
});

來源

2013-04-13 02:11:43 pilsetnieks

你能建議怎麼做嗎？ – chithon

我已經給答案添加了一個編輯，也許這可能有所幫助。 – pilsetnieks

我試過你的解決方案，但它仍然加載整個表 – chithon

<?php 
include('connection.php'); 

    if(isset($_REQUEST["id"])) 
    { 
    $cmd=mysql_query("delete from login where id=" .$_REQUEST["id"] .";"); 
    header("location: comment.php"); 
    } 

?>

在此代碼刪除行

header("location: comment.php");

最終代碼會

，

<?php 
include('connection.php'); 

    if(isset($_REQUEST["id"])) 
    { 
    $cmd=mysql_query("delete from login where id=" .$_REQUEST["id"] .";"); 
    echo '1'; 
    } else { 
    echo '0'; 
    } 

    exit; 
?>

在刪除功能中，執行刪除查詢後，需要回顯'1'或'0'。讓我們說回聲'1';當刪除成功並且在刪除不成功時回顯「0」。因此，根據1或0，您可以刪除表中的那些刪除行，

$（「。delete_button」）。on（「click」，function（）{//刪除通過警報點擊的行然後重新加載列表 VAR OBJ = $（本）; VAR ID = obj.attr（「ID」）;

/*var x=window.confirm("Are you sure you want to delete this item?") 
    if (x==true){*/ 
     $.ajax({ 
      type: "POST", 
      url: "delete.php", 
      data: "id="+ id, 
      success: function(response){ 
       if(response == '1') { 
         obj.parent.remove(); 
       } 
      } 
     }); 
    // } 
    return false; 
});

來源

2013-04-13 04:30:17 Kautil

我試過你的解決方案，當我點擊刪除它需要我delete.php和顯示1它不留在comment.php頁面如果我刪除從HREF標記delete.php鏈接不起作用 – chithon

刪除記錄使用jquery ajax，但表再次加載

回答

相關問題