Jquery、Ajax、PHP：编辑mysql条目_Php_Jquery_Mysql

Jquery、Ajax、PHP：编辑mysql条目

php jquery mysql

Jquery、Ajax、PHP：编辑mysql条目,php,jquery,mysql,Php,Jquery,Mysql,我已经寻找了一个星期的答案，但我认为我的理解还不足以理解我发现的大部分内容我正在使用一个基于教程的简单的“将客户机添加到数据库”功能，现在我修改了它，以便可以通过“编辑客户机”按钮从数据库中检索记录。“编辑客户端”显示记录列表 $('button.edit').click(function() { //alert('this is an alert message'); $('form#submit').hide(function(){$('div.showRecords').f

我已经寻找了一个星期的答案，但我认为我的理解还不足以理解我发现的大部分内容

我正在使用一个基于教程的简单的“将客户机添加到数据库”功能，现在我修改了它，以便可以通过“编辑客户机”按钮从数据库中检索记录。“编辑客户端”显示记录列表

$('button.edit').click(function() {
     //alert('this is an alert message');
  $('form#submit').hide(function(){$('div.showRecords').fadeIn()});  
 });

（我知道这很草率，我更希望在按下“编辑客户机”按钮时让它填充表单，但我的理解还不太清楚）

我让列表记录工作，但在“记录列表”中的每个记录旁边都有一个编辑按钮（每个记录一个）。从这里（不工作）我希望能够$（'button.editRecords'）。单击（function（）{可以编辑表单中的单个记录…我感到有点不知所措

在PHP函数中，ID在url中传递到表单页面，表单页面根据ID调用记录。我猜我需要在检索表单时执行类似的操作，这就是我开始跟踪的地方…有什么想法吗

<script type"text/javascript"> 
$(document).ready(function(){

 $('button.edit').click(function() {
     //alert('this is an alert message');
  $('form#submit').hide(function(){$('div.showRecords').fadeIn()});  
 });

 $('button.editRecords').click(function() {
     //alert('this is an alert message');
  $('form#submit').hide(function(){$('div.updateRecords').fadeIn()});  
 });



$("form#submit").submit(function() {
 // we want to store the values from the form input box, then send via ajax below
 var fname     = $('#fname').attr('value');
 var lname     = $('#lname').attr('value'); 
  $.ajax({
   url: "ajax.php",
   type: "POST",
   data: "fname="+ fname +"& lname="+ lname,
   success: function(data)
    {                     
     if(data.success == 1)
     {   
      alert ('success');
      //$('form#submit').hide(function(){$('div.success').fadeIn()});
     }  
     else  
     {  
      alert ('failure');
      //$('form#submit').hide(function(){$('div.failed').fadeIn()});
     }     
     }
  });   
 return false;
 });

$("form#form1").submit(function() {
 // we want to store the values from the form input box, then send via ajax below
 var fname     = $('#fname').attr('value');
 var lname     = $('#lname').attr('value'); 
  $.ajax({
   url: "update_ac.php",
   type: "GET",
   data: "fname="+ fname +"& lname="+ lname +"& id="+ id,
   success: function(data)
    {                     
     if(data.success == 1)
     {   
      alert ('success');
      //$('form#submit').hide(function(){$('div.success').fadeIn()});
     }  
     else  
     {  
      alert ('failure');
      //$('form#submit').hide(function(){$('div.failed').fadeIn()});
     }     
     }
  });   
 return false;
 });

});
</script>


<body>
<br><br><br><br><br><br><br><br>  

<form id="submit" method="post">
    <fieldset>
        <legend>Enter Information</legend>

                    <label for="fname">Client First Name:</label>
        <input id="fname" class="text" name="fname" size="20" type="text">

                    <label for="lname">Client Last Name:</label>
        <input id="lname" class="text" name="lname" size="20" type="text">

        <button class="button positive"> <img src="../images/icons/tick.png" alt=""> Add Client </button>
    </fieldset>
</form>

<div class="listRecords">
 <button class="edit"> <img src="../images/icons/tick.png" alt="">Edit Clients</button>  
</div> 

<div class="showRecords" style="display:none;">
    <?php $sql="SELECT * FROM clients";
    $result=mysql_query($sql);
 ?>
    <table width="400" border="0" cellspacing="1" cellpadding="0">
        <tr>
            <td>
                <table width="400" border="1" cellspacing="0" cellpadding="3">
                    <tr>
                     <td colspan="4"><strong>List data from mysql </strong> </td>
                    </tr>

                    <tr>
                     <td align="center" style="background-color:#FFF;"><strong>Name</strong></td>
                     <td align="center" style="background-color:#FFF;"><strong>Lastname</strong></td>
                     <td align="center" style="background-color:#FFF;"><strong>Edit</strong></td>
                    </tr>
                 <?php while($rows=mysql_fetch_array($result)){ ?>
                    <tr>
                     <td><? echo $rows['fname']; ?></td>
                     <td><? echo $rows['lname']; ?></td>
                     <td align="center">
                         <!--- <a href="updated2.php?id=<? //echo $rows['id']; ?>">---><!--- This is where the form carried the id to updated2.php that I need to replicate in my jquery function --->
                         <button class="editRecords"><img src="../images/icons/edit.gif" height="20" width="58" alt="Edit Record"><? echo $rows['id']; ?></button>
                            </a>
                        </td>
                    </tr>
                 <?php } ?>
                </table>
            </td>
        </tr>
 </table>
</div>
<div class="updateRecord" style="display:none;">

<?php
 $id=$_GET['id'];

 // Retrieve data from database 
 $sql="SELECT * FROM clients WHERE id='$id'";
 $result=mysql_query($sql);

 $rows=mysql_fetch_array($result);
?>
<table width="400" border="0" cellspacing="1" cellpadding="0">
    <tr>
        <form name="form1" method="post">
            <td>
                <table width="100%" border="0" cellspacing="1" cellpadding="0">
                    <tr>
                     <td>&nbsp;</td>
                     <td colspan="3"><strong>Update Records</strong> </td>
                    </tr>
                    <tr>
                        <td align="center">&nbsp;</td>
                        <td align="center">&nbsp;</td>
                        <td align="center">&nbsp;</td>
                        <td align="center">&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="center">&nbsp;</td>
                        <td align="center"><strong>Name</strong></td>
                        <td align="center"><strong>Lastname</strong></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td align="center"><input name="fname" type="text" id="fname" value="<? echo $rows['fname']; ?>"></td>
                        <td align="center"><input name="lname" type="text" id="lname" value="<? echo $rows['lname']; ?>" size="15"></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><input name="id" type="hidden" id="id" value="<? echo $rows['id']; ?>"></td>
                        <td align="center"><input type="submit" name="Update" value="Update"></td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </td>
        </form>
    </tr>
</table>
</div>


$（文档）.ready（函数（）{
$（'button.edit'）。单击（函数（）{
//警报（“这是一条警报消息”）；
$（'form#submit'）.hide（function（）{$（'div.showRecords'）.fadeIn（）}）
});
$（'button.editRecords'）。单击（函数（）{
//警报（“这是一条警报消息”）；
$（'form#submit'）.hide（function（）{$（'div.updateRecords'）.fadeIn（）}）
});
$（“表单提交”）.submit（函数（）{
//我们希望存储表单输入框中的值，然后通过下面的ajax发送
var fname=$（'#fname'）.attr（'value'）；
var lname=$（'#lname'）.attr（'value'）；
$.ajax({
url:“ajax.php”，
类型：“POST”，
数据：“fname=“+fname+”&lname=“+lname，
成功：功能（数据）
{                     
如果（data.success==1）
{   
警惕（“成功”）；
//$（'form#submit'）.hide（function（）{$（'div.success'）.fadeIn（）}）；
}  
其他的
{  
警报（“故障”）；
//$（'form#submit'）.hide（function（）{$（'div.failed'）.fadeIn（）}）；
}     
}
});   
返回false；
});
$（“form#form1”）。提交（函数（）{
//我们希望存储表单输入框中的值，然后通过下面的ajax发送
var fname=$（'#fname'）.attr（'value'）；
var lname=$（'#lname'）.attr（'value'）；
$.ajax({
url:“update_ac.php”，
键入：“获取”，
数据：“fname=“+fname+”&lname=“+lname+”&id=“+id，
成功：功能（数据）
{                     
如果（data.success==1）
{   
警惕（“成功”）；
//$（'form#submit'）.hide（function（）{$（'div.success'）.fadeIn（）}）；
}  
其他的
{  
警报（“故障”）；
//$（'form#submit'）.hide（function（）{$（'div.failed'）.fadeIn（）}）；
}     
}
});   
返回false；
});
});









输入信息
客户名：
客户姓氏：
添加客户端
编辑客户端
列出mysql中的数据
名称
Lastname
编辑
单击“添加/编辑”按钮时，您应该调用一个Ajax函数，该函数将所有数据传递给“添加”或“编辑”，然后您也可以传递一个操作（添加/编辑）。然后，您的PHP脚本将知道对数据运行更新或插入命令
祝你好运！
我建议使用加载功能来显示要编辑的记录
将记录的id值放在按钮的id属性中，确保showRecords div也为空
$('button.edit').click(function() {
    // Retrieves the id of the record you want to edit
    var id = $(this).attr("id"); 
    $('form#submit').hide(function(){$('div.showRecords').load("record.php?id="+id).fadeIn()});  
 });

祝你好运。的确如此。但看起来你在查看结果方面做得很好。你将以相同的方式调用ajax进行编辑和更新，但PHP脚本将有所不同。
$('button.edit').click(function() {
    // Retrieves the id of the record you want to edit
    var id = $(this).attr("id"); 
    $('form#submit').hide(function(){$('div.showRecords').load("record.php?id="+id).fadeIn()});  
 });