簡體   English   中英

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

[英]Display records on load page using jquery ajax in php

我想在加載頁面時加載數據,但是如果我嘗試這樣做,則刪除功能將不起作用,並且每當我插入效果時,都應在不刷新頁面的情況下在表中看到效果,請檢查我的代碼在此所做的更改

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");
  }


?>

看起來您正在抓取鏈接的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 click事件完成所有工作時,您可能不需要鏈接href指向delete.php,因為它無關緊要。

另外,由於您是通過jquery插入html(包括delete方法),因此可能需要使用“ on”事件

我正在袖手旁觀執行此操作,因此代碼可能會有一些小錯誤,但是我相信這是您要采用的方法...

修改后可能看起來像這樣:

JQUERY

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

鏈接

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

幾件事要注意...

1-以上我實際上不是在驗證記錄,而是在刪除相應的表行之前刪除了該記錄-您可能需要實現一些檢查方法

2-刪除表行的替代方法是通過重新刷新數據並輸出將其更新為一般表-如果您知道我的意思

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM