Возврат отправленных данных POST с Alpine. js и новыми FormData () - PullRequest
Новая
       13

Возврат отправленных данных POST с Alpine. js и новыми FormData ()

0 голосов
/ 01 апреля 2020

Я пытаюсь отправить некоторые данные формы, используя 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>

1 Ответ

0 голосов
/ 29 апреля 2020

Таким образом, правильный ответ на этот вопрос заключается в том, что вам нужна ваша 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);
        });"
>
...