javascript - 如何使用ajax将数据属性从html发送到some.php页面，点击？

Question

在这种情况下，我从数据库中获取产品 ID 并将其放入 data-idproduct:

<a class="cart" href="" data-idproduct="<?php echo $itemArtikal['id_product'] ?>">Add to Cart</a>

单击“添加到购物车”按钮，我正在获取存储的 data-idproduct 并尝试将其发送到 cart-process.php 页面。
这是我的 main.js 代码:

$(document).ready(function (){
$('.cart').click(function (e) {
    e.preventDefault();
    let dataIdArtikla = $(this).data('idproduct');

    $.ajax({
        method: "post",
        url: "models/cart-process.php",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({
            "idProd" : dataIdArtikla
        }),
        success: function (response) {
            alert(response);
        },
        error: function (xhr, textStatus) {
            alert("oh no: "+ " " + xhr.status+ " " +textStatus.responseText);
        }
    })
});

})
这是基本的cart-process.php代码:

$idProduct = $_POST['idProd'];

header('Content-type: application/json');
echo json_encode([
    'id_product' => $idProduct
]);

它总是返回错误并且 JSON 的响应始终为空
来自“网络”选项卡的响应:

<br />
<b>Warning</b>:  Undefined array key "idProd" in <b>C:\xampp\htdocs\freshshop01\models\cart-process.php</b> on line <b>5</b><br />
{"id_artika":null}

通常，这背后的想法是当用户单击“添加到购物车”按钮时将产品添加到购物车中。我试图传递点击产品的 id，然后在cart-process.php 中显示具有相同 id 的整个产品信息。
我不知道如何解决它，有人可以帮忙吗？
编辑:
这是我的新cart-process.php 文件:

<?php
$idArtikla = $_POST['idProd'];

if(isset($idArtikla)) {

require_once "../config/connection.php";
session_start();

$_SESSION['idArtikla'] = $idArtikla;

$queryCart = $conn -> prepare('SELECT * FROM artikal WHERE id_artikal = :idArtikal');
$queryCart->bindParam(":idArtikal", $idArtikla);

try {
    $queryCart->execute();
    $resultCart = $queryCart->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $exception) {
    echo json_encode(['error' => $exception->getMessage()]);
}
header('Content-type: application/json');
echo json_encode($resultCart);

}
和新的 main.js 文件:

$(document).ready(function (){
$('.cart').click(function (e) {
    e.preventDefault();
    let dataIdArtikla = $(this).data('idartikla');

    $.ajax({
        method: "post",
        url: "models/cart-process.php",
        dataType: 'json',
        data: {
            "idProd" : dataIdArtikla
        },
        success: function (response) {
            console.log("Success message: " + response);
        },
        error: function (xhr, textStatus) {
            alert("oh no: "+ " " + xhr.status+ " " +textStatus.responseText);
        }
    })
});

})
响应现在返回整个对象，但它不会继续成功。它输入错误。我怀疑对象到 json 的转换有问题，反之亦然，但不确定这里到底有什么问题？
以下是响应和请求的样子:


帖子有点长，我感谢帮助。

Answer 1

传递数据时，您必须向 JSON 添加一个键。
而不是 contentType 使用 dataType:'json' 告诉 jQuery 期望什么。

$.ajax({
    method: "post",
    url: "models/cart-process.php",
    dataType: 'json',
    data: {'json':JSON.stringify({"idProd" : dataIdArtikla})},
    success: function (response) {
        alert(response);
    },
    error: function (xhr, textStatus) {
        alert("oh no: "+ " " + xhr.status+ " " +textStatus.responseText);
    }
})

在 php 中，您可以像这样访问元素:

echo (json_decode($_POST['json'])->idProd);

一种更简单的方法是只传递数据而不进行序列化

$.ajax({
    method: "post",
    url: "models/cart-process.php",
    data: {"idProd" : dataIdArtikla},
    success: function (response) {
        alert(response);
    },
    error: function (xhr, textStatus) {
        alert("oh no: "+ " " + xhr.status+ " " +textStatus.responseText);
    }
})

然后就可以直接通过 $_POST 访问 idProd:

echo ($_POST['idProd']);