Jquery Ajax 不传递多个值

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' />

并从你的表单标签中移除 action 属性。

然后像这样做你的 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>