在php中使用jquery ajax顯示加載頁面上的記錄

我想在加載頁面時加載數據，但是如果我嘗試這樣做然後刪除函數不起作用，並且每當我插入效果時都應該在表格中看到不刷新頁面檢查我的代碼在這個在php中使用jquery ajax顯示加載頁面上的記錄

的index.php

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(e) { 
     $("#Submit").click(function(e) { 

     var name = $('#name').val();   
     var message=$('#message').val(); 
     if($(":text").val().length==0)      
     { 
      $(":text").after('<span class="error">Field cannot be empty</span>'); 
      $('#name').addClass('error'); 
      $('#message').addClass('error');     
      return; 
     } 
     else{ 
      $('#name').removeClass('error'); 
      $('#message').removeClass('error'); 
      //$('#propspectDiv').removeClass('error');       
      $('#propspectDiv').html('Submitting your Request.<img src="ajax.gif" />'); 
      $.ajax({ 
        url : 'data.php',     
        data:{ 
         "name" : name, 
         "message" : message    
        }, 
        success : function(data){ 
         window.setTimeout(function(){ 
          $('#propspectDiv').html('Your Name is added to our records'); 
          $('#data').css("display","block"); 
          $('#data').html(data);    
         }, 2000); 
        }, 
        complete:function(){ 
        $('#myform').each(function(){ 
        this.reset(); 
       }); 
      } 
       }); 
     } 

     }); 

    $("a").click(function() { 
     $.post('delete.php',{ id: $(this).attr("id")}); 
    }); 
    }); 

    </script> 

    </head> 
    <body> 
    <form id="myform"> 
    <div id="wrapper"> 
    Name : <input type="text" id="name" /> 
        </br> 
    Message : <input type="text" name="message" id="message" /> 
        </br> 

     <input type="button" value="Submit" id="Submit" /> 
     <div id="propspectDiv"></div> 
     <table id="data" border="1" style="display:none;"></table> 
    </div> 
    </form> 
    </body>

data.php

<?php 
$name = $_REQUEST['name']; 
$message = $_REQUEST['message']; 
include('connection.php'); 

$sql = "INSERT INTO login (username,message) VALUES ('$name','$message')"; 

if (!mysql_query($sql,$con)) 
    { 
    die('Error: ' . mysql_error()); 
    } 

    $sqlnew = 'Select * from login order by id ASC'; 
    $res = mysql_query($sqlnew); 
    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 id=td1> 
      <a href=delete.php?id=".$row['id']."&type=Delete>Delete</a></td>"; 
     echo '</tr>'; 
     $i++; 
    } 

?>

delete.php

做哪些改變

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

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


?>

來源

2013-04-12 chithon

看起來你的抓取鏈接的ID屬性，但不能將其設置...

$("a").click(function() { 
    $.post('delete.php',{ id: $(this).attr("id")}); 
});

有現有的刪除鏈接，沒有ID屬性：

<a href=delete.php?id=".$row['id']."&type=Delete>Delete</a></td>";

而且 - 當jQuery點擊事件完成所有工作時，您可能不需要鏈接href指向delete.php，因爲它無關緊要。

而且，因爲你通過jQuery插入HTML（包括刪除方法），你可能需要使用「開」事件

我這樣做即興這樣的代碼可能有一些小錯誤但我相信這是你要採取的路徑...

修訂它可能是這樣的：

JQUERY

$("a").on("click", function(e) { 
    e.preventDefault(); 
    $.post('delete.php',{ id: $(this).attr("id")}); 
    return false; 
});

LINK

echo"<td id=td1> 
    <a id='".$row['id']."' href='#'>Delete</a>"; 
echo '</tr>';

幾件事情要注意...

1 - 上面，我沒有實際驗證前先刪除了相應的錶行的記錄已被刪除 - 您可能要實現的東西檢查此

2 - 去除錶行的替代方案是剛剛repulling數據並輸出更新一般表 - 如果你知道我的意思

來源

2013-04-12 02:00:49 99823

感謝它幫助我刪除記錄，但在刪除後html表格不顯示 – chithon

刪除記錄後，在on（「click」，function（e）{方法中，您將不得不打電話通過ajax更新您的表格，就像您在你使用這個輸出HTML：$（'＃data'）。html（data）; - 你懂我的意思嗎？ – 99823

你實際上可能只能刪除已刪除的表格行 - 請查看我上面更新的代碼 - 特別是$（this）.parent（）。remove（）; - 這可能會得到你需要的東西 – 99823

在php中使用jquery ajax顯示加載頁面上的記錄

回答

相關問題