我使用PHP在登录系统中绘制了一个使用表,下面是HTML / PHP代码,
session_start();
include_once("../iConnect/handShake.php");
$getUsers = "SELECT * FROM userlogin ORDER BY uId ASC";
$getUsersQuery = $dbConnect -> query($getUsers);
?>
<html>
<head>
<title></title>
<!-- Style sheets -->
<link rel="stylesheet" type="text/css" href="../../CSS/main.css">
<!-- JavaScritps -->
<script language="JavaScript" type="text/javascript" src="../../jScripts/jquery-3.2.0.min.js"></script>
<script language="JavaScript" type="text/javascript" src="../../jScripts/userListFunctions.js"></script>
</head>
<body>
<div id="divCenter" class="box">
<div style="width: 166px; position: absolute; left: 642px; top: 20px; height: 44px;">
<img src="../../images/logo.png" width="142" height="33">
</div>
<div id="mainDiv">
<div id="navi"></div>
<div id="infoi"></div>
<table id="hor-minimalist-b">
<div id="bgDimmer"></div>
<div id="divContent"></div>
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Team</th>
<th scope="col">Created By</th>
<th scope="col">Created Date</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<?php while ($row = $getUsersQuery -> fetch(PDO::FETCH_ASSOC)) { ?>
<tr>
<td id="uId"><?php echo $row["uId"]; ?></td>
<td id="fName"><?php echo $row["fName"]; ?></td>
<td id="lName"><?php echo $row["lName"]; ?></td>
<td id="team"><?php echo $row["uTeam"]; ?></td>
<td id="cBy"><?php echo $row["createdBy"]; ?></td>
<td id="uCd"><?php echo $row["uCreateDate"]; ?></td>
<td><input type="button" class="uEdit" name="uEdit" id="uEdit" value="Edit" /></td>
<td><a href="deleteUser.php?id=<?php echo $row["uId"] ?>"><input type="button" name="uDelete" id="uDelete" value="Delete" /></a></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<div id="msg"></div>
</body>
</html>
问题1:
我正在尝试使用Java脚本从列ID中提取用户ID,它确实通过使用
document.getElementById("uId").innerText
将其提取,但是即使我单击其他编辑按钮,它也只会占用第一行。我的Java脚本代码:
$(document).ready(function () {
$('.uEdit').click(function (){
// getUserId();
var uId = document.getElementById("uId").innerText;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("msg").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST","editUser.php?uId="+uId,true);
xmlhttp.send();
$('#bgDimmer').show();
$('#divContent').show().load('editUser.php');
});
$(document).mouseup(function(x) {
var container = $("#divContent"),
dimmer = $('#bgDimmer');
if (container.is(":visible")) {
if (!container.is(x.target) //check if the target of the click isn't the container...
&& container.has(x.target).length === 0) {
container.hide();
dimmer.hide();
}
}
});
$('#close').click(function () {
$('#bgDimmer').hide();
$('#divContent').hide();
});
});
问题2:
当我通过相同的功能将数据发送到editUSer.php以外的另一个PHP时,上面的代码也有另一个问题,它不会被提交,但是当我发送到另一个php然后回显它刚显示的数据时但我只想将ID直接发送到editUser.php文件,并将当前现有数据填充到字段中。
可以帮我解决这个问题。
更新:
我尝试了以下答案,但问题仍然存在。
更新2:
下面的代码正在获取ID,但是由于某种原因它没有被发送到正在处理的php中,有人可以告诉我为什么吗?
var uId = $(this).data("uid");
// alert(uId);
$.post("test.php?uId="+uId,function() {
$('#bgDimmer').hide();
$('#divContent').load('test.php',function(){
$(this).show();
$('#bgDimmer').show();
});
});
更新3:
成功!我设法解决了以下问题,描述了发生了什么以及如何解决。
因此,我上面发布的代码发生了这种情况,您可以看到我试图将一个值仅发送到名为editUser.php的页面,该页面将捕获该值并使用它从该数据库中获取详细信息并归档该字段。用户编辑表单。
但是它不起作用,我使用@mplungjan的代码,但是什么也没有。加载表单后,主按钮click事件未发送任何数据。我在editUser.php中回显了发送的值。
几乎拔掉头发后,我特别浏览了浏览器控制台的“网络”选项卡。哦,我的上帝,有两个实例看起来像这个http://editUser.php?uId=1和另一个http://editUser.php。
实际上,正在发生的是第一个发送数据,但是第二个未加载任何数据,
'#divContent').load('editUser.php'
调用了该数据,由于没有要捕获的数据,导致出现错误的未定义索引。好了,解决方案很简单,我的逻辑也有缺陷(人为错误-是的,我仍然是人)。我要做的是通过加载页面的同一命令发送数据。我还有@mplungjan的代码中的一小部分代码,但是下面是我的解决方案,它可以使它工作。
$('.uEdit').click(function (){
var uId = $(this).data("uid");
$('#bgDimmer').show();
$('#divContent').show().load('editUser.php?uId='+uId);
});
});
希望这对将来有帮助。
最佳答案
ID必须是唯一的。
现在使用jQUery和$ .ajax。您正在以一种非常不健康的方式混合DOM和jQuery
永远不要链接删除!!!一次GoogleBot抓取,您的数据库为空
一个几乎没有变化的例子
$('.uEdit').on("click",function (){
// getUserId:
var uId = $(this).parent().siblings(":first").text();
$.post("editUser.php?uId="+uId,function() {
$('#bgDimmer').show();
$('#divContent').show().load('editUser.php');
});
});
更好的例子
<td><input type="button" class="uEdit" value="Edit"
data-uid="<?php echo $row["uId"] ?>" /></td>
<td><input type="button" class="uDel" value="Delete"
data-uid="<?php echo $row["uId"] ?>" /></td>
并有
$('.uEdit').on("click",function (){
// getUserId:
var uId = $(this).data("uid");
$('#bgDimmer').show();
$('#divContent').load('editUser.php',function(){ // this is a GET!
$(this).show();
});
});
$('.uDel').on("click",function (){
// getUserId:
var uId = $(this).data("uid");
$.post("deleteUser.php?uId="+uId,function() { // OR $.get if needed
// show deleted
});
});