Вернуть отправленные данные POST с помощью Alpine.js и new FormData ()

Question

Я пытаюсь отправить некоторые данные формы, используя Alpine.js, на текущую страницу, которая затем будет использоваться PHP $_GET для выполнения некоторых функций.

Кажется, что в ответе возвращается вся страница, а не данные формы (которые затем выдаются из-за недопустимого JSON).

Как я могу вернуть только отправленные данные формы в ответе?

<form
    method="post"
    action="./"
    class="form__press"
    x-on:submit.prevent="
        let formData = new FormData();
        formData.append('username', 'Chris');
        fetch('./', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
        .then((response) => response.json())
        .then((result) => {
          console.log('Success:', result);
        })
        .catch((error) => {
          console.error('Error:', error);
        });"
>
    <div class="field mb:15@xs">
        <label for="pressEmail">Email</label>
        <input type="email" name="pressEmail" autocomplete="off" required />
    </div>
    <div class="field mb:15@xs">
        <label for="pressPassword">Password</label>
        <input type="password" name="pressPassword" autocomplete="new-password" required />
    </div>
    <button type="submit" name="submit">Submit</button>
</form>

Answer 1

Итак, правильный ответ на этот вопрос заключается в том, что вам нужно, чтобы ваша бэкэнд-функция PHP возвращала JSON с правильным типом содержимого ("application/json").

Однако вы также можете добиться этого на стороне клиента, поскольку у вас есть все данные, которые вы хотите вернуть.

<form
    method="post"
    action="./"
    class="form__press"
    x-on:submit.prevent="
        let formData = new FormData();
        formData.append('username', 'Chris');
        fetch('./', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
        .then(() => JSON.parse(JSON.stringify(formData)))
        .then((result) => {
          console.log('Success:', result);
        })
        .catch((error) => {
          console.error('Error:', error);
        });"
>