Question

我使用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脚本从使用document.getElementById("uId").innerText的列ID中提取用户ID，但即使我点击其他编辑按钮，它也只占用第一行。

我的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的代码，但仍然没有。当表单加载时，没有从主按钮单击事件发送的数据。我在editUser.php中回显了发送的值。

几乎拉了我的头发后，我特意看了浏览器控制台的网络选项卡。我的上帝有2个实例，其中http://editUser.php?uId=1和另一个http://editUser.php。

实际上发生的事情是第一个发送数据但第二个加载了没有数据被'#divContent').load('editUser.php'调用，导致错误未定义索引，因为没有数据被捕获。 / p>

嗯，解决方案很简单，我的逻辑存在缺陷（人为错误 - 是的，我还是人类）。我要做的是通过加载页面的相同命令发送数据。我仍然有一个来自@ mplungjan代码的小代码部分，但下面的其余部分是使其工作的解决方案。

$('.uEdit').click(function (){
    var uId = $(this).data("uid");       

      $('#bgDimmer').show();
      $('#divContent').show().load('editUser.php?uId='+uId);
   });
});

希望这对未来有所帮助。

Answer 1

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         
   });
});

使用JavaScript

1 个答案: