Есть ли способ предотвратить возврат echo json_encode() ответа JSON со всей страницей при отправке формы в тот же PHP-скрипт?
У меня есть единственный файл index.php в проекте. Я знаю, что мне следует отделить логику от представления, использовать разные файлы для PHP, JS и HTML. Это всего лишь тест:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (isset($_POST["item"]) && $_POST["item"] == "new") {
$description = filter_input(INPUT_POST, trim("description"));
echo json_encode($description);
}
}
?>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Itens</title>
</head>
<body>
<form method = "post">
<input type = "text" name = "description" placeholder = "Description">
<button type = "submit">Add Item</button>
</form>
<script>
const form = document.querySelector("form")
form.addEventListener('submit', async (e) => {
e.preventDefault()
const item = "new"
const description = form.description.value
const formData = new FormData()
formData.append("item", item)
formData.append("description", description)
try {
await fetch('./index.php', {
method: 'POST',
body: formData,
headers: {
'Accept': 'application/json, text/plain, */*'
}
})
.then((res) => res.json())
.then((data) => {
alert(data)
})
}
catch(error) {}
})
</script>
</body>
</html>
Функция echo json_encode() работает и отправляет ответ, но также отправляет всю страницу, перезагружая index.php, что делает невозможной работу со значением ответа в коде выборки JavaScript. При работе с echo json_encode() в сценарии, отличном от кода, который его вызвал, этого, конечно, не происходит. Можно ли это исправить, сохранив одну файловую структуру?
Вместо echo json_encode($description); просто сделайте exit( json_encode($description) );
trim("description") не имеет абсолютно никакого смысла
Вам также следует использовать оператор return после echo json_encode(), но его использование с оператором существования выглядит многообещающе.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
да, помести это в HTML
<?php
$jsonData = {};
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (isset($_POST["item"]) && $_POST["item"] == "new") {
$description = filter_input(INPUT_POST, trim("description"));
$jsonData = json_encode($description);
}
}
?>
<script>
const json = <?php echo $jsonData; ?>
</script>
<pre><?php echo $jsonData; ?></pre>
Более чистый способ, как вы упомянули (REST API), — это поместить вывод json в отдельный скрипт php и использовать javascript для запроса json.
Мне нужно найти способ использовать ответ при выборке JavaScript, чтобы я мог динамически изменять DOM с данными из ответа, но я не знаю, возможно ли это, потому что страница перезагружается вместе с ответом.
да, это обычный способ сделать что-то: используйте выборку, чтобы запросить php-файл, содержащий json, затем вы можете снова использовать javascript, чтобы записать эти значения в документ. У вас есть POST, поэтому предположим, что вам нужно использовать js для отмены отправки формы, отправить данные формы с помощью выборки и получить ответ, чтобы затем распечатать документ. замена функциональности HTML по умолчанию на javascript — единственный способ предотвратить перезагрузку страницы. Возможно, потратите некоторое время на учебник по REST.
Все, что тебе нужно:
добавьте квадратную скобку (чтобы массив использовался для функции json_encode)
echo json_encode([$description]);
добавить выход(); как написал Арун А.С.
и, наконец, верхняя часть будет:
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (isset($_POST["item"]) && $_POST["item"] == "new") {
$description = filter_input(INPUT_POST, trim("description"));
echo json_encode([$description]);
exit();
}
}
В идеале вы также должны добавить header('Content-type: application/json') перед echo.
согласен, очень хорошая идея
Подождите, а почему ОП должен добавлять квадратные скобки вокруг $description? Это не имеет никакого смысла
Существует только практика использования массива типов для функции json_encode(), но, как видно, json_encode() допускает смешанный тип, поэтому действительно возможно вообще не использовать скобки.
Это решило проблему, спасибо всем за помощь!
попробовал exit() после эха?