首页 > 解决方案 > Ajax 调用动态加载的行

问题描述

我已经动态加载(基于搜索结果)内容。(见下文)
(stackoverflow 不允许我嵌入图像,因为我还是新手)
https://i.imgur.com/WVVc0wM.png

以上代码;

     echo '
    <td><a href="profile/?student='.$row['sid'].'">'.$row['use_name'].'</a></td>
    <td>'.$row['admission_number'].'</td>
    <td>'.$row['dob'].'</td><td>Not Assigned</td>
    <td>
<form>
<input type="hidden" name="sid" class="sid" value="'.$row['sid'].'">
<input type="hidden" name="classID" class="classID" value="1">
<button class="btn btn-warning btn-sm add" type="button" name="add"><i class="fas fa-pencil-alt"></i> Add</button>
</form>
</td>
<td>
    <div id="res"></div>
</td></tr>';
                        }

我想将 , 传递sidclassID一个名为add-student.php

$(".add").click(function() { 
    $.ajax({
           type: "POST",
           url: "add-student.php",
        data:'sid='+$(".sid").val()+'&cid='+$(".classID").val(),
           success: function(data) {
               alert(data); 
           }
    });
    return false; 
});
</script>

以下是add-student.php

<?php
    require('../../dbc/dbconn.php');
    $student = $_POST['sid'];
    $class = $_POST['cid'];
    $user = "System";
    
    //check the existance
    $check = mysqli_query($condb, "select sid, cid from studentsclasses where sid = '$student' and cid = '$class'");
    if(mysqli_num_rows($check)>0){
        echo 'The record already exists';
    }
    else{
        $insert = mysqli_query($condb, "insert into studentsclasses (sid, cid, createdBy) value('$student', '$class', '$user')");
            if($insert){
                echo 'Success';
            }
            else{
                echo 'Error';
            }   
    }
?>

当我第一次单击“添加”按钮时,它成功添加到数据库中。
但是,当我单击另一行中的“添加”按钮时,我收到记录已存在错误。
请给出您的建议。

标签: javascriptphpajax

解决方案


data-attributes添加所需的数据以直接通过for传递元素$(".sid").val()只会根据html您提供的内容为您提供第一个元素的值。

当第一个值始终是被传递的值时,预计您对后端的检查会通知您该记录已经存在。

您可以将标记更改为:

<button class="add" type="button" name="add" data-sid="'.$row['sid'].'" data-cid="1">Add</button>

然后监听click事件并发送ajax

$(function(){
    $('.add').on('click', function(){
        const sidval = $(this).data('sid')
        const cidval = $(this).data('cid')
        $.ajax({
           type: "POST",
           url: "add-student.php",
           data: {
              sid: sidval,
              cid: cidval
           },
           success: function(data) {
               alert(data); 
           }
        });
    })
})

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes


推荐阅读