Return 使用 Alpine.js 和新的 FormData() 提交了 POST 数据

Question

我正在尝试 POST 一些表单数据，使用 Alpine.js，到当前页面，然后 PHP $_GET 将使用这些数据到运行一些功能。

它似乎是 return 响应中的整个页面，而不是表单数据（然后由于无效 JSON 而出错）。

如何在响应中只return提交的表单数据？

<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 后端函数 return JSON 具有正确的内容类型 ("application/json")。

但是你也可以实现这个客户端，因为你已经得到了你想要的所有数据returned。

<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);
        });"
>

Return 使用 Alpine.js 和新的 FormData() 提交了 POST 数据

Return submitted POST data with Alpine.js and new FormData()

alpine.js