使用ajax將數據發送到服務器的問題

Question

我已經編寫了一個代碼，可以使用HTML從數據庫中創建一個表，並且希望在每一行上都具有刪除和確認按鈕。 我將整個行放在<form method="post">屬性中。 在JavaScript文件中，我讀取了電子郵件的值，並使用ajax將其發送到服務器，然后服務器執行該操作。 問題是當我想刪除一行或使用每一行的按鈕確認它時，即使我單擊另一行的按鈕，它也僅適用於第一行。 我使用document.getElementById('email')但它總是返回第一行。 這是我的html代碼：

<table id="example1" class="table table-bordered table-striped">
   <thead>
   <tr>
       <th>نام کاربر</th>
       <th>ایمیل</th>
       <th>تایید</th>
   </tr>
   </thead>
   <tbody>
    <?php
    while ($users = mysqli_fetch_assoc($result_user)) {
    ?>
    <tr>
       <form name="ajax-demo" id="ajax-demo" method="get">
           <td><?php echo $users['name']?></td>
           <td><?php echo $users['email']?></td>
                <input id="email" type="hidden" name="email" value="<?php echo $users['email']?>">
            <td>
                <div class="btn-group">
                  <button onclick="confirmUser()" id="btnConfirm" type="submit" class="btn btn-success btn-flat">
                      تایید
                  </button>
                  <button type="button" class="btn btn-success btn-flat dropdown-toggle" data-toggle="dropdown">
                     <span class="caret"></span>
                     <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                  <li>
                     <a onclick="deleteUser()" id="btnDelete">حذف</a>
                  </li>
                  </ul>
                </div>
             </td>
        </form>
     </tr>
    <?php }?>
    </tbody>
</table>

和javaScript代碼：

<script>
    function confirmUser() {
        var email = document.getElementById("email").value;
        var xhr;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE 8 and older
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var data = "email=" + email;
        xhr.open("POST", "confirm_user.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
        xhr.onreadystatechange = display_data;
        function display_data() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    //alert(xhr.responseText);
                    document.getElementById("txtHint").innerHTML = xhr.responseText;
                } else {
                    alert('There was a problem with the request.');
                }
            }
        }
    }
    function deleteUser() {
        var email = document.getElementById("email").value;
        var xhr;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE 8 and older
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var data = "email=" + email;
        xhr.open("POST", "confirm_user_delete.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
        xhr.onreadystatechange = display_data;
        function display_data() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    //alert(xhr.responseText);
                    document.getElementById("txtHint").innerHTML = xhr.responseText;
                } else {
                    alert('There was a problem with the request.');
                }
            }
        }
    }
</script>

最后是我的confirm_user.php代碼：

<?php
$conn = mysqli_connect('localhost', 'root', 'root', 'my_scheme');
if (!$conn) {
    die('Connection failed ' . mysqli_error($conn));
}
if (isset($_POST['email'])) {
    $email_user = $_POST['email'];
    $sql = "UPDATE my_scheme.tbl_user SET active='true' WHERE email='".$email_user."'";
    if (mysqli_query($conn, $sql)) {
        echo '<h5 class="headline text-green">کاربر با موفقیت تایید شد!</h5>';
    }else {
        echo "Error: ". mysqli_error($conn);
    }
    exit();
}
else {
    echo "failed";
}

Confirm_user_delete.php代碼類似於之前的代碼。 請幫助我解決此問題。 謝謝

Answer 1

如果我理解您的問題對。 您具有從數據庫結果創建表行的數據庫輸入。 但是，即使您單擊第二個元素，也總是從表行中獲取第一封電子郵件的ID。

原因：您可以像這樣簡單地進行操作

    <?php
$email = 'myemail.com';
?>

<button onclick="confirmUser('<?php echo $email; ?>')"class="btn btn-success btn-flat"> Delete Me </button>

<script>
function confirmUser(email)
{
    console.log("The email to delete is: " + email);
}
</script>

Answer 2

<button onclick="confirmUser(this)" data-email="<?php echo $users['email']?>" id="btnConfirm" type="submit" class="btn btn-success btn-flat">تایید</button>

並在js函數中：

function confirmUser(this) {
        var email = this.getAttribute("email");
        var xhr;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE 8 and older
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var data = "email=" + email;
        xhr.open("POST", "confirm_user.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
        xhr.onreadystatechange = display_data;
        function display_data() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    //alert(xhr.responseText);
                    document.getElementById("txtHint").innerHTML = xhr.responseText;
                } else {
                    alert('There was a problem with the request.');
                }
            }
        }
    }

刪除操作相同。