Question

我正在尝试学习Jquery Ajax。我有一个页面，使用while循环来显示SQL行。我正在尝试编写一个脚本，允许用户使用提交按钮异步删除行。此外，该脚本将删除存储在服务器上的两个文件（其URL存储在db行中）。我已经在这几天工作了，我确信不仅仅有一个错误。我在这里寻找一些建议，告诉我如何让这个工作。

截至目前，当用户点击时，它会指向空白页面。行和文件不会被删除，并且js（confirm（“”））不会弹出。

HTML

<form action="delete_list.php" method="POST" id="delete_form">
  <input type="hidden" id="id" value="<?php echo $id ?>" name="id" />
  <input type="hidden" id="ad_link" value="<?php echo $ad_link ?>" name="ad_link" />
  <input type="hidden" id="listing_img" value="<?php echo $listing_img ?>"     name="listing_img" />
  <input type="submit" name="delete" value="Submit" />
</form>

JS

<script type="text/javascript">
    $(function() {
        $(document).on('click', '.delete', function() {
            var element = $(this);

            var del_id = element.attr("id");
            var info = 'id=' + del_id;

            var del_file = element.attr("ad_link");
            var info = 'ad_link=' + del_file;

            var del_img = element.attr("listing_img");
            var info = 'listing_img=' + del_img;
            if (confirm("Are you sure you want to delete this listing?")) {
                $.ajax({
                    type: "POST",
                    url: "delete_list.php",
                    data: info,
                    success: function() {}
                });
            }
            return false;
        });
    });
</script>

php（在单独的页面上） - 是否最好将此文件放在与html相同的页面上？

<?php
require('../dbcon2.php');
if (isset($_POST['id']) && ($_POST['ad_link']) || ($_POST['listing_img'])) {
    $idc = $_POST['id'];
    unlink($_POST['ad_link']);
    unlink($_POST['listing_img']);

    try {
        $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $stmt = $conn->prepare("DELETE FROM listings WHERE id = $idc");
        $stmt->execute();
    }
    catch (PDOException $e) {
        echo $sql . "<br>" . $e->getMessage();
    }
    $conn = null;
}
$url = 'http://website.com/members_area/delete_listings.php';
while (ob_get_status()) {
    ob_end_clean();
}
header("Location: $url");
?>

Answer 1

由于您使用ajax提交，因此无需创建完整表单，只需将其简化为按钮即可。此外，获取所有需要的值并将其添加为data-属性。

<button class="delete" data-id="<?php echo $id ?>" data-ad_link="<?php echo $ad_link ?>" data-listing_img="<?php echo $listing_img ?>" >Delete</button>

然后你的js可以简化为

<script type="text/javascript">
    $(function() {
        $(document).on('click', '.delete', function() {
            var element = $(this);

            if (confirm("Are you sure you want to delete this listing?")) {
                $.ajax({
                    type: "POST",
                    url: "delete_list.php",
                    data: {id: element.data("id"), ad_link: element.data("ad_link"), listing_img: element.data("listing_img") },
                    success: function() {}
                });
            }
            return false;
        });
    });
</script>

此外，在您使用PDO和->prepare()的PHP中，您应该使用占位符

$stmt = $conn->prepare("DELETE FROM listings WHERE id = ?");
$stmt->execute(array($idc));

Answer 2

你的jquery文件和html代码都有问题。

首先为您在jquery文件中使用的提交按钮提供一个类。

并将按钮类型属性设置为按钮。

<input type='button' class='delete' name='delete' />

并从表单标记中删除操作属性。

并像你一样做你的jquery事情

<script type="text/javascript">
    $(document).ready(function(){
        $(document).on('click','.delete',function(){


            var info = '';
                info += 'id='+$('#id').val();
                info += '&adlink='+$('#ad_link').val();
                info += '&listing_img='+$('#listing_img').val();

            if( confirm( 'Are you sure you want to delete?' ) ){
                $.ajax({
                    type:'POST',
                    url:'yourfile.php',
                    data:info,
                    success:function(){ }
                });
            } else {
                return false;
            }
        }
    });
</script>

Jquery Ajax没有传递多个值

2 个答案: