使用jquery ajax编辑和更新

Question

我已经开发了代码，允许用户使用AJAX方法在同一页面上编辑和更新详细信息。 更新功能运行良好。

下面有一些图片。 在第一张图中，我正在从数据库中获取用户详细信息。 我想要一个“编辑配置文件”按钮，以将上面的文本替换为相应的输入字段以进行编辑。 我该如何实现？ 通过JQuery，AJAX还是div？

单击编辑按钮之前

单击编辑按钮后

的PHP

include('config.php');
$query = mysql_query("SELECT * FROM ebusers WHERE UserID = '26'");
while($row = mysql_fetch_array($query))
{
    echo "<form id=updateform method=post action=update.php?id=" .$row['UserID']. ">";
    echo "<input type=text name=uname value=" .$row['UserName']. "><br>";
    echo "<input type=text name=uemail value=" .$row['UserEmail']. "><br>";
    echo "<button id=upd>Update</button><br>";
    echo "</form>";
    echo "<hr>";
    echo "<span id=updateresult></span>";
}

AJAX

$("#upd").click( function() {
    $.post( $("#updateform").attr("action"),
        $("#updateform :input").serializeArray(),
        function(info){ $("#updateresult").html(info);
        });
    clearInput();
});

$("#updateform").submit( function() {
    return false;
});

function clearInput() {
    $("#updateform :input").each( function() {
        $(this).val('');
    });
}

UPDATE.PHP

include_once('config.php');
$getid = (int)$_GET['id'];
$name = $_POST['uname'];
$email = $_POST['uemail'];
if(mysql_query("UPDATE ebusers SET UserName = '$name', UserEmail = '$email' WHERE UserID = '$getid'"))
    echo "Successfully updated";
else
    echo "Failed to update records";

Answer 1

您可以用“开关”伪造此“替换”。 绘制“带有编辑按钮的打印版本”和“带有输入和更新按钮的更新版本”，然后在它们之间进行交换，如下所示：

创建列表的PHP

include('config.php');
$query = mysql_query("SELECT * FROM ebusers WHERE UserID = '26'");
while($row = mysql_fetch_array($query)) {
  ?>
  <div class="switch-group">
    <div class="update-form-wrap swappable">
      <form action="update.php?id=<?php echo $row['UserId'] ?>" metho="post" class="update-form">
        <input type="text" name="uname" value="<?php echo $row['UserName'] ?>" /><br/>
        <input type="email" name="uemail" value="<?php echo $row['UserEmail'] ?>" /><br/>
        <button class="update-btn swap" scope="switch-group" rel=".print-version">Update</button>
      </form>
    </div>
    <div class="print-version swappable">
      <span class="uname"><?php echo $row['UserName'] ?></span><br/>
      <span class="uemail"><?php echo $row['UserEmail'] ?></span><br/>
      <button class="edit-btn swap" scope="switch-group" rel=".update-form-wrap">Edit</button>
    </div>
    <span class="updateresult"></span>
  </div>  
  <hr/>
  <?php
}

进行交换的jQuery

$(document).on('click', 'button.swap', function(e) {
  e.preventDefault();
  var scope = $(this).closest($(this).attr('scope'));
  var rel = $($(this).attr('rel'), scope);
  scope.fine('> div').hide();
  rel.show();
});

$(".update-btn").click( function() {
  var self = $(this);
  var scope = self.closest(self.attr('scope'));
  $.post($("#updateform").attr("action"),
    $("#updateform :input").serializeArray(),
    function(info){ 
      $(".updateresult", scope).html(info.message);
      update_printout($(self.attr('rel'), scope), info.data);
    }
  );
});

$("#updateform").submit( function() {
  return false;
});

function update_printout(cont, data) {
  for (i in data) if (data.hasOwnProperty(i)) {
    $('span.'+i, scope).text(data[i]);
  }
}

粗略的PHP更新并返回json结果

include_once('config.php');
$result = array();

$getid = (int)$_GET['id'];
$result['uname'] = $name = $_POST['uname'];
$result['uemail'] = $email = $_POST['uemail'];
if(mysql_query("UPDATE ebusers SET UserName = '$name', UserEmail = '$email' WHERE UserID = '$getid'"))
  $result['message'] = "Successfully updated";
else
  $result['message'] = "Failed to update records";
echo @json_encode($result);

这样的事情应该做到。 确保您的update.php返回json。 使用该json来表示代表打印输出版本上数据的“跨度”。 交换按钮的点击次数。 那应该总结一下。

希望这可以帮助。