Fatal编程技术网

Javascript Ajax删除不起作用

javascript php jquery ajax

Javascript Ajax删除不起作用,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我有一个表单，其中显示图片和其他内容。我想使用将显示在图像旁边的删除按钮删除显示的图片。单击该按钮后，图像将从我的数据库中删除，然后图像将从表单中删除 为了实现这一点，我正在考虑在delete按钮上使用onclick函数，它将启动一个AJAX调用，从数据库中删除图像。然后，我将通过jquery.remove继续从表单中删除图像 虽然我知道我必须做什么，但我的代码似乎不起作用，因此我在stackoverflow上发表了文章 错误： 当我点击删除按钮时，没有发生任何事情 如果有人能指出我错在哪里，那

我有一个表单，其中显示图片和其他内容。我想使用将显示在图像旁边的删除按钮删除显示的图片。单击该按钮后，图像将从我的数据库中删除，然后图像将从表单中删除

为了实现这一点，我正在考虑在delete按钮上使用onclick函数，它将启动一个AJAX调用，从数据库中删除图像。然后，我将通过jquery.remove继续从表单中删除图像

虽然我知道我必须做什么，但我的代码似乎不起作用，因此我在stackoverflow上发表了文章

错误： 当我点击删除按钮时，没有发生任何事情

如果有人能指出我错在哪里，那真的会很有帮助

谢谢

我的代码：

主页：

    <?php
if(!isset($_SESSION))
{
    session_start();
}

if($_SESSION['auth']!=="yes")
{
    echo"You are not authorised to view this page. Please login <a href='login.php'>here</a>";
    exit();
}
?>

<!DOCTYPE HTML>
<html>
<head>
<!--Links to Css Page-->
<link type="text/css" rel="stylesheet" href="style.css">
<!--Loads JQuery script-->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<!--edits list of item categories on page load-->
<script type="text/javascript">
$(document).ready(function(){
    $("#edititemtable").hide();
    $("#edititemsubcat").hide();
    $("#edititemdetails").hide();
    $("#edititemcat").load("getcategory.php");

    $("#edititemcat").change(function(){
        var cat=$("#edititemcat").val();
        $("#edititemsubcat").show();
        $("#edititemsubcat").load('getsubcategory.php?cat='+cat);
    });

    $("#edititemsubcat").change(function(){
        var cat=$("#edititemcat").val();
        var subcat=$("#edititemsubcat").val();
        $("#edititemdetails").show();
        $("#edititemdetails").load('getitem.php?cat='+cat+'&subcat='+subcat);
    });

    $("#edititemsubmit").click(function(){
        var cat=$("#edititemcat").val();
        var subcat=$("#edititemsubcat").val();
        var item=$("#edititemdetails").val();
        $("#edititemtable").show();
        $("#edititemtable").append($("#details").load('changeitem.php?cat='+cat+'&subcat='+subcat+'&item='+item));

    });


    //Loads the Categories
    $('#changeitemcat').load("getcategory.php");
    //Loads the SubCategories
    $("#changeitemcat").change(function(){
        var cat=$("#changeitemcat").val();
        $("#changeitemsubcat").load('getsubcategory.php?cat='+cat);
    });
    //Deletes the existing pic via AJAX
    $("#changeitempicdel0").click(function(){
        alert("SUCCESS");
    });

});



</script>

</head>
<body style=" width:500px">
<form id="edititem" name="edititem" method="POST" action="getitem.php" >
    <table>
        <tr>
            <td>
                <select id="edititemcat" name="edititemcat"></select>
            </td>


            <td>
                <select id="edititemsubcat" name="edititemsubcat"></select>
            </td>



            <td>
                <select id="edititemdetails" name="edititemdetails"></select>
            </td>



            <td>
                <input type="button" id="edititemsubmit" name="edititemsubmit" value="Get Item" />
            </td>


</form>

<table id="edititemtable" border='1'>

<tr>
    <td colspan='2'>Item Info</td>
</tr>

<tr>
    <td>Select Category: </td>
    <td>
        <select id='changeitemcat' name='changeitemcat'></select>
    </td>
</tr>

<tr>
    <td>Select SubCategory: </td>
    <td>
        <select id='changeitemsubcat' name='changeitemsubcat'></select>
    </td>
</tr>

<tr>
    <td colspan="2" id="details" name="details">
    </td>
</tr>

</table>
</body>
</html>
表单pagechangeitem.php的摘录

//NOTE:$imagecount is used to provide a unique id to each of the images loaded,     starting from index 0, increasing per loop.
//E.g changeitempicdel0,changeitempicdel1,changeitempicdel2, etc.
$imagecount=0;
WHILE($showpic=$getpic->fetch(PDO::FETCH_ASSOC))
{


echo"<div id='image'.$imagecount>";
        $image=$showpic['Path'];
        $imageid=$showpic['ImageName'];
        echo"<tr>";
            echo"<td>";
                echo"Image";
            echo"</td>";

            echo"<td>";

                echo"<input type='hidden' id='changeitempicchangeid'$imagecount value=$imageid />";
                echo"<input type='button' id='changeitempicchange'$imagecount value='Change Picture' />";

            echo"</td>";
        echo"</tr>";

        echo"<tr>";
            echo"<td></td>";
            echo"<td>";
                //Displays image
                echo"<img src=$image id='image'$imagecount width='250' height='250' alt=''>";
                //Passes image id, used for deletion
                echo"<input type='hidden' id='changeitempicdelid'$imagecount value=$imageid />";
                //Delete button
                echo"<input type='button' id='changeitempicdel$imagecount' value='Delete' />";

            echo"</td>";
        echo"</tr>";
        echo"</div>";
        $imagecount++ ;

    }
处理pagedeletepic.php

    <?php
if(!isset($_SESSION))
{
session_start();
}

if($_SESSION['auth']!=="yes")
{
    echo"You are not authorised to view this page. Please login <a href='login.php'>here</a>";
    exit();
}
?>

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<?php

include("cxn.inc");
$picid=$_POST['pid'];
$picdel=$cxn->prepare("DELETE FROM `testdb`.`itempic` WHERE `PicID`=:picid ");
$picdel->bindValue(":picid",$picid);
$picdel->execute();

?>
</body>
</html>
您已经在单击函数中硬编码了changeitempicdel0。您需要为每个元素添加单击事件

例如，功能可以是：

$(".fooClass").click(function(){
        ...
    });

        echo"<input type='button' class="fooClass" id='changeitempicdel'$imagecount value='Delete' />";
代码中还有许多其他方面可以改进。Sql注入就是其中之一。
使用类和委托事件：

$(document).on('click','.myclass',function(){
    alert("SUCCESS");
});
在这里，它将委托给文档级别，您应该使用delete按钮中最近的静态容器元素。很难找到读取代码的元素

PHP:

并且没有看到任何changeitempicdel0元素。我很确定您需要委派事件，或者您的选择器错误。删除按钮及其代码在哪里？@A.Wolff changeitempicdel0元素是=changeitempicdel$imagecount，其中imagecount是循环已运行的轮数，为每个图像提供了不同的id。@kundansinghchoushan删除按钮在changeitem.php下，按钮的id是ChangeItemPicDel请在下次呈现html时提供，而不是服务器端代码，这会使您发布的代码无法读取我尝试使用类而不是id，但相同的问题仍然存在。当我单击按钮时，不会发生任何事，即使类/id相同？ 
//Delete button
echo"<input class='myclass' type='button' id='changeitempicdel$imagecount' value='Delete' />";