Question

我需要监控页面中按钮的点击，点击它时我需要触发POST请求。有了这个请求，我需要向PHP发送一些课程ID，以便我可以从数据库中删除该课程。为此，我做了类似的事情;

我有一个包含课程详情的表格和一个按钮，

<table>
<tr><td>Course ID</td>
<td>Course Name</td>
<td>Avail.  Quota</td>
</tr>
<tr><td>CS101</td>
<td>Programming 1</td>
<td> 2 <input style="margin-left: 320px;"  type="button" id="submit" value="Cancel" cid="CS101"/></td>
</tr><tr><td>CS315</td>
<td>Objects</td>
<td>5<input style="margin-left: 320px;"  type="button" id="submit" value="Cancel" cid="CS315"/></td>
</tr></table>

我有一排课程详情和最后一个按钮来删除课程。我有一个像这样设置的JQuery来处理点击事件;

$(document).ready(function(e) {
$('#submit').on('click', function(event){
    e.preventDefault();
    $('#submit').fadeOut(300);

    $.ajax({
        url: 'del_course.php',
        type: 'post',
        data: {'action': 'delete', 'cid': '11239528343'},
        success: function(data, status) {
            if(data == "ok") {
                // Change page to indicate that deletion was successful
            }
        },
        error: function(xhr, desc, err) {
            console.log(xhr);
            console.log("Details: " + desc + "\nError:" + err);
        }
    });
)};
)};

在此阶段，del_course.php只是重定向到空白页面以查看是否检测到点击。 del_course.php如下;

<?php
if($_POST['action'] == "delete") {
    $cid = $_POST['cid'];             
    echo (''.$cid.' will be deleted.'); 
    echo "ok";
    header( 'Location: empty.php' );
}
?>

我在这里缺少什么？单击该输入元素时没有任何反应。此外，您可以看到，对于此示例，我只是将课程ID硬编码为AJAX脚本中的cid。如何从输入元素传递cid，以便我将为单击的按钮传递相应的课程ID？

Answer 1

我确信那些是最后一次：

)};
)};

应该是：

});
});

要追踪您的ajax回复，您可以使用console.log或类似的内容：

del_course.php

<?php
if($_POST['action'] == "delete") {
  $cid = $_POST['cid'];             
  echo (''.$cid.' will be deleted.');       
}
?>

Ajax call

success: function(data) {
   alert(data);
}

Answer 2

你绑定到两个具有相同ID的元素，我建议将按钮切换到类，然后通过＆＃39;这个＆＃39;使用正确的范围。宾语。

$('.submit').on('click', function(event){
e.preventDefault();
$(this).fadeOut(300);

$.ajax({
    url: 'del_course.php',
    type: 'post',
    data: {'action': 'delete', 'cid': '11239528343'},
    success: function(data, status) {
        if(data == "ok") {
            // Change page to indicate that deletion was successful
        }
    },
    error: function(xhr, desc, err) {
        console.log(xhr);
        console.log("Details: " + desc + "\nError:" + err);
    }
});

并将按钮更改为<input style="margin-left: 320px;" type="button" class="submit" value="Cancel" cid="CS101"/>

Answer 3

代码：

$(document).ready(function(e) {
$('#submit').on('click', function(event){
    e.preventDefault();

您有两个事件值，我相信您想要：

event.preventDefault();

这应该正确停止POST，以便您可以使用以下AJAX调用异步执行

Answer 4

if(data == "ok") {
            // Change page to indicate that deletion was successful
}

数据不仅仅是

"ok"

因为：

echo (''.$cid.' will be deleted.'); 
echo "ok";

看到问题？简单，删除第一个回声

使用JQuery和PHP响应单击事件

4 个答案: