通過 ajax 發送帖子請求不起作用

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

我還建議你重命名你的 function removeUser()因為它沒有刪除任何東西，它只是將處理程序附加到按鈕上。

通過 ajax 發送帖子請求不起作用

問題描述

1 個解決方案

解決方案1
0 已采納 2021-04-18 09:33:20

通過 ajax 發送帖子請求不起作用

問題描述

1 個解決方案

解決方案1 0 已采納 2021-04-18 09:33:20

解決方案1
0 已采納 2021-04-18 09:33:20