我开发了代码,允许用户使用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";
答案 0 :(得分:0)
您可以使用“开关”来伪装“替换”。绘制“带编辑按钮的打印版本”和“带输入和更新按钮的更新版本”,然后在它们之间切换,如下所示:
创建列表的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来创建代表打印输出版本数据的“跨度”。交换按钮点击。这应该总结你。
希望这有帮助。