Question

我想在单击按钮时发送 Ajax 请求，但我的请求似乎从未执行过。
这是我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>User Form</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src = "./actions.js"></script>
</head>
<body>

<div id="badFrm" class="container">
    <h2><br>User Registration</h2>
    <form  id="Form" method="post">
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="name" class="form-control" id="name" placeholder="Enter Name" name="name">
        </div>
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
        </div>
        <button id="submitBtn"  class="btn btn-primary">Submit</button>
    </form>
</div>

</body>
</html>

这是我的 javascript 代码：我觉得我的 javascript 代码有问题，但我不知道出了什么问题！我根据评论对其进行了很多更改。我想要的是，当我单击更新按钮时，它会更改为“再次提交”，并且我想用输入字段替换“列表项”（名称和 eamil），并将其中写入的任何内容保存在数据库中。并最终返回到注册表格的第一页。

$(document).ready(function() {
    var i ;
    $("#submitBtn").click(function (e) {
        e.preventDefault();
        var name = $("#name").val();
        var email = $("#email").val();
        $.post("http://localhost/MiniProject/connect.php",
            {
                name: name,
                email: email
            }, function () {
                var element = document.getElementById("badFrm");
                element.remove();
                showTbl();

            });

        function showTbl() {

            $.post("http://localhost/MiniProject/Select.php",
                {
                    name: name,
                    email: email
                }, function (res) {
                    // console.log(res);
                    res = JSON.parse(res);
                    var html = '<ul id="List">';
                    for (i = 0; i < res.length; i++) {
                        var j = i +1 ;
                        html += '<li class = "name" >' + res[i].name + '</li><li  class = "email">' + res[i].email + '</li>'+ '<div>' + '<button onclick="removeUser(this)" id="'+j+'"  class="btn btn-primary">Remove</button>' + '<button onclick="updateUser(this)" id="'+j+'"  class="btn btn-primary">Update</button>' + '</div>';
                    }
                    html += '</ul>';
                    document.body.innerHTML = html;
                });
        }

        // function Update() {
        //     $.post("http://localhost/MiniProject/Update.php",
        //         {
        //             name: name,
        //             email: email
        //         }, function (res) {
        //             alert(res);
        //         });
        // }
    });



});

// $(document).ready(function() {
//
//     $("#removeBtn").click(function (e) {
//         e.preventDefault();
//         var ID = document.getElementById("removeBtn");
//         var element2 = document.getElementById("List");
//         element2.remove();
//         $.post("http://localhost/MiniProject/Remove.php",{
//             id : ID
//         }, function (res) {
//             document.write(res);
//         });
//     });
//
// });

function removeUser(element){
    var ID = element.id;
    var element2 = document.getElementById();
    element2.remove();
    $.post("http://localhost/MiniProject/Remove.php",{
        id : ID
    }, function (res) {
        console.log(res);
        document.write(res);
    });
    //alert(element.id);
}

function updateUser(element){  // i need help in this part
    var ID2 = element.id;
    listItem = document.querySelector("li.name");
    newNameInput = document.createElement('INPUT');
    newNameInput.innerHTML = '<input type="name" class="form-control" id="name" placeholder="Enter New Name" name="name">';
    listItem.parentNode.replaceChild(newNameInput, listItem);

    listItem = document.querySelector("li.email");
    newEmailInput = document.createElement('INPUT');
    newEmailInput.innerHTML = '<input type="email" class="form-control" id="email" placeholder="Enter New Email" name="email">';
    listItem.parentNode.replaceChild(newEmailInput, listItem);


    // var Data = document.getElementbyId("lstitm");
    // Data.remove();
    // var Input = document.createElement("INPUT");
    // Input.setAttribute('type','text');
    $.post("http://localhost/MiniProject/Update.php",{
        id : ID2,

    }, function (res) {
        console.log(res);
//        document.write(res);
    });
}

Answer 1

问题出在 javascript 代码中。
我可以看到您正在 #removeBtn 中的用户单击提交按钮时发送的 ajax 请求的回调上创建按钮 showTbl()。
然后调用 removeUser()，为新创建的 #removeBtn 按钮创建处理程序。

您遇到的问题是 ajax 回调是异步。因此，您在创建按钮之前将处理程序附加到 #removeBtn 上。

这是你应该做的：

$("#submitBtn").click(function (e) {
    e.preventDefault();
    var name = $("#name").val();
    var email = $("#email").val();
    $.post("http://localhost/MiniProject/connect.php",
        {
            name: name,
            email: email
        }, function () {
            var element = document.getElementById("badFrm");
            element.remove();
            showTbl();
            //removeUser(); <- remove that line
           // Update();
    }
);

function showTbl() {
    $.post("http://localhost/MiniProject/Select.php",
        {
            name: name,
            email: email
        }, function (res) {
            res = JSON.parse(res);
            var html = '<ul id="List">';
            for (var i = 0; i < res.length; i++) {
                html += '<li>' + res[i].name + '</li><li>' + res[i].email + '</li>'+ '<div>' + '<button id="removeBtn"  class="btn btn-primary">Remove</button>' + '<button id="updateBtn"  class="btn btn-primary">Update</button>' + '</div>';
            }
            html += '</ul>';
            document.body.innerHTML = html;
            removeUser(); // <- call it there instead
        }
    );
}

我还建议您重命名您的函数 removeUser()，因为它不会删除任何内容，它只是将处理程序附加到按钮上。

通过ajax发送帖子请求不起作用

1 个答案: