当我从 MySQL 获取数据时，Ajax 不工作答案

【问题标题】：Ajax is not working when I fetch data from MySQL当我从 MySQL 获取数据时，Ajax 不工作
【发布时间】：2021-10-15 01:04:44
【问题描述】：

我正在构建一个电子商务。为此我从数据库中获取数据产品，我想让人们在购物车中添加产品而不刷新页面，我尝试了 AJAX，但我不知道为什么但它有效仅当数据不在循环中时，我才使用 PHP 和 MySQL。代码：

<?php
    $results = $conn->query("SELECT * FROM idd");
    while ($list = $results->fetch_assoc()){
        ?>
    <form method="POST" id="formId<?php echo $list['id'] ?>">
        <input type="hidden" name="name" value="value">
        <!-- <input type="hidden" name="name" id="id" value="value"> -->
        <input type="submit" onclick="upcart(<?php echo $list['id']; ?>)">
    </form>
<?php
    }
    ?>
    
    <script>

$(document).ready(function() {
    function upcart(id){

    e.preventDefault();
    $.ajax({
        method: "POST",
        url: "data.php",
        data: $("#formId"+ id).serialize(),
        // dataType: "text",
        success: function (response) {
            alert("success");
        }
        // return false;
    });
    };

});
    </script>

【问题讨论】：

好的，现在我有另一个问题，一切都很好，但是数据没有进入本地主机，但它太长了，为此我会问一个新问题
您能否进一步说明这不起作用？您面临的具体问题是什么？是没有发送ajax请求还是您的data.php无法处理请求？ data.php是这个文件还是另一个文件？

标签： javascript php html mysql ajax

【解决方案1】：

使用事件而不是手动调用 javascript 函数。

然后我们不需要为表单生成 id，因为我们可以在回调中访问正确的表单。

PHP部分：

<?php
$results = $conn->query("SELECT * FROM idd");
while ($list = $results->fetch_assoc()){
    ?>
    <form method="POST" class="some-form-class">
        <input type="hidden" name="name" value="value" />
        <input type="submit" />
    </form>
<?php
}
?>

JS部分：

<script>
$(document).ready(function() {
    // Bind the forms submit event
    $('.some-form-class').on('submit', function (event) {
        event.preventDefault();

        // Here we can use $(this) to reference the correct form
        $.ajax({
            method: "POST",
            url: "data.php",
            data: $(this).serialize(),
            success: function (response) {
                alert("success");
            }
        });
    });
});
</script>

【讨论】：

【解决方案2】：

注意：Magnus Eriksson 的答案要干净得多

由于function upcart(id)不在全局范围内，onclick="upcart(<?php echo $list['id']; ?>)">会因为缺少函数而失败

您需要在全局范围内声明该函数

另外，您需要正确阻止表单提交

<?php
    $results = $conn->query("SELECT * FROM idd");
    while ($list = $results->fetch_assoc()){
        ?>
    <form method="POST" id="formId<?php echo $list['id'] ?>">
        <input type="hidden" name="name" value="value">
        <!-- <input type="hidden" name="name" id="id" value="value"> -->
        
        <input type="submit" onclick="return upcart(<?php echo $list['id']; ?>)">
    </form>
<?php

注意return upcart .... - 非常重要

不在$(document).ready(function() { 内，因为您无需等待文档准备好声明函数！

function upcart(id) {
    $.ajax({
        method: "POST",
        url: "data.php",
        data: $("#formId" + id).serialize(),
        success: function (response) {
            alert("success");
        }
    });
    return false; // to prevent normal form submission
}

【讨论】：

我爱你，兄弟，我正在寻找解决方案 3 天
嗯，这很尴尬 - 我几乎不认识你：p
我什至建议在表单提交时添加一个事件监听器，而不是在按钮 onclick 上手动调用函数。然后你也不需要乱搞 id，只需在所有表单上设置事件（你可以使用一个类来选择它们）。
是的，我正在这样做，就像之前的 10 次尝试和失败
@MagnusEriksson - 是的，一旦我重新阅读了它在我脑海中点击的代码！你的代码更好