>source

단추를 클릭 할 때 AJAX 요청을 보내고 싶지만 내 요청이 실행되지 않는 것 같습니다. 다음은 내 HTML code입니다.

<!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 code에 문제가 있지만 뭐가 잘못된 것으로 여겨지는 느낌이 들지 않습니다! 나는 내가 일찍 얻은 의견에 따라 많은 것을 바꿨다. 내가 원하는 것은 갱신 버튼 ""을 변경하고 목록 항목을 다시 바꾸고 싶습니다. "(이름 및 이메일) 입력 필드가있는 대신 대신 데이터베이스에 저장 될됨을 지정하십시오. 레지스터 양식 인 첫 번째 페이지 로 돌아가는 . 나는이 부분에 도움이 필요해 !! 나는이 부분이 버그가 아는 ​​것을 안다. 각 목록 항목에 개별적으로 에 도달하는 방법을 알아야합니다 (내가 추가 /사용해야하는 속성 내 JavaScript code가 있습니다.


$(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 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){
    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);
\
    $.post("http://localhost/MiniProject/Update.php",{
        id : ID2,
    }, function (res) {
        console.log(res);
//document.write(res);
    });
}

위의 자바 스크립트가 사용중인 실제 code입니까? 콘솔을 보았습니까? Connect.php에 어떤 code가 있습니까?

Professor Abronsius2021-04-20 18:26:13

예, 이것은 내가 사용하고있는 것입니다. 그리고 콘솔을 보면서 무슨 뜻입니까? Desc에있는 Connect.php를 추가했습니다.

Farzad Yaghoobi2021-04-20 18:26:13

$ .post 직전에 잃은 "\"가 있습니다. ( "http : //localhost/miniproject/update.php"오류가 발생하는 "http : //update.php"~ 대부분의 현대적인 브라우저가 있습니다. 어떤 브라우저가 있습니까?

Professor Abronsius2021-04-20 18:26:13

고마워. 네, 이제는 콘솔이 무엇인지 그리고 나는 그것을 보았습니다. 그리고 나는 크롬 브라우저를 사용하고 있습니다

Farzad Yaghoobi2021-04-20 18:26:13

update.php 또는`connect.php와 같은 다양한 장소에서 여기에서 mysqli와 pdo code를 여기에서 실행중인 이유는 무엇입니까? 또한 주목할 가치가있는 -클래스 사용자는 DatabaseClass` 확장 ~ 사용자의 데이터베이스입니까? 아니. 클래스를 확장하면 동일하거나 유사한 유형의 객체가있을 때 의미가 있습니다 ...이 경우 DB 연결을 사용자 클래스 ....하지만 파라미터로 전달할 수 있지만 작동하지 않지만 작동하지 않지만 그렇지 않습니다. 디자인 시점에서 위대합니다

Professor Abronsius2021-04-20 18:26:13
  • 이전 javascript : 0-999로 번호를 제한하는 방법과 쉼표가 반응 한 후 3 개의 숫자 만 제한하십시오.
  • 다음 java : FFMPEG를 사용하여 Google 클라우드 플랫폼 및 Google 클라우드 스토리지에서 MOV 원자를 MP4 파일 앞으로 이동하십시오.