如何使用AJAX在循环中更新ACF字段

Question

我正在运行一个循环，它显示自定义类型的帖子。每个帖子都有一个<button class=favorite-toggle>add to favorites</button>。当用户单击按钮时，我希望将post对象添加到该用户特定的中继器字段中。

如何使用AJAX实现这一点？我的基本理解是，我需要将post_ID和user_ID变量传递给JS，然后通过AJAX函数，将变量传递给一个新的PHP文件，该文件将包含我的函数，但我无法实现这一点。任何帮助都将不胜感激！

Answer 1

我不确定你有哪些JS/PHP框架可用，但HTML+JS的普通解决方案是这样的：

var btnAddToFavorites = document.getElementById('js-add-to-favorites');
btnAddToFavorites.addEventListener('click', function(e) {
let _data = {
post_ID: "1234"
}
fetch("addToFavourite.php", {
method: "POST",
body: JSON.stringify(_data),
headers: {
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(json => {
console.log("success")
console.log(json)
})
.catch(err => console.log(err));
});

<button class="favorite-toggle" id="js-add-to-favorites">Add to Favorites</button>

和PHPaddToFavourite.php

<?php
$body = file_get_contents("php://input");
$object = json_decode($body, true);
print_r($object);
?>

有几种方法可以将Post ID放入JS函数中。如果你的JS中还没有任何数据/视图模型，那么假设你有PHP生成页面，你可以将其添加到按钮中

<button class="favorite-toggle" id="js-add-to-favorites" data-postid="1234">Add to Favorites</button>

并用加载到JS中

e.getAttribute("data-postid")