简体   繁体   English

在php中使用jquery ajax在加载页面上显示记录

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

I want to load data when page is loaded but if i try doing that then delete function doesn't work and whenever I insert the effect should be seen in table without refreshing page Please check my code what changes to be done in this 我想在加载页面时加载数据,但是如果我尝试这样做,则删除功能将不起作用,并且每当我插入效果时,都应在不刷新页面的情况下在表中看到效果,请检查我的代码在此所做的更改

index.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 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 delete.php

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

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


?>

Looks like your grabbing the ID attribute of the link, but not setting it... 看起来您正在抓取链接的ID属性,但未进行设置...

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

There is no ID attribute on your existing delete link: 现有的删除链接上没有ID属性:

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

Also - you probably don't need to have the link href pointing to delete.php as its irrelevant when the jquery click event does all the work. 另外-当jquery click事件完成所有工作时,您可能不需要链接href指向delete.php,因为它无关紧要。

Also, because you are inserting the html (including the delete method) via jquery you may need to use the "on" event 另外,由于您是通过jquery插入html(包括delete方法),因此可能需要使用“ on”事件

I'm doing this off the cuff so the code may have some minor bugs but I believe this is the path you want to take... 我正在袖手旁观执行此操作,因此代码可能会有一些小错误,但是我相信这是您要采用的方法...

Revised it might look like this: 修改后可能看起来像这样:

JQUERY 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>';    

couple things to note... 几件事要注意...

1 - above i'm not actually VERIFYING the record was deleted before I remove the appropriate table row - you may want to implement something to check this 1-以上我实际上不是在验证记录,而是在删除相应的表行之前删除了该记录-您可能需要实现一些检查方法

2 - an alternative to removing the table row would be to just update the table in general by repulling the data and outputting it - if you know what i mean 2-删除表行的替代方法是通过重新刷新数据并输出将其更新为一般表-如果您知道我的意思

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM