使用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來表示代表打印輸出版本上數據的“跨度”。 交換按鈕的點擊次數。 那應該總結一下。

希望這可以幫助。