我正在try 用JS中的AJax发送我的表格输入.

实际代码如下:

const form = document.querySelector('#login');

form.addEventListener('submit', function (event) {
    event.preventDefault();

    fetch('page.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(new FormData(this))
    })
    .then(response => response.json())
    .then(result => {
        console.log('Success:', result);
    })
    .catch(error => {
        console.error('Error:', error);
    });
});

这里的问题是在我的PHP页面中,print_r($_POST);会返回空白内容.

如果需要,格式HTML:

<form id="login">
    <div class="form-group mb-3">
        <input type="email" class="form-control" name="USR_Email" placeholder="Email Address">
    </div>
    <div class="form-group mb-3">
        <input type="password" class="form-control" name="USR_Password" placeholder="Password">
    </div>
    <div class="d-grid mt-4">
        <button type="submit" class="btn btn-primary">Login</button>
        <input type="hidden" name="action" value="login">
    </div>
</form>

我错过了什么吗?

谢谢.

推荐答案

问题的根源在于

JSON.stringify(new FormData(this))

不输出任何内容.

有很多方法可以正确地将serialize FormData to JSON修改为receive the POSTed JSON data,但您还需要将您的PHP代码正确地更改为receive the POSTed JSON data.

一个更简单的解决方案是将SON从等式中剔除,并直接提供FormData对象,其中fetch()将自动为您进行URL编码,然后PHP将自动为您解析为$_POSTarray.在您的场景中,您并不特别需要SON的管理费用.

只是写

fetch('page.php', {
  method: 'POST',         
  body: new FormData(this)     
}) 

Javascript相关问答推荐

如何在alpinejs中显示dev中x-for的元素

使用redux-toolet DelivercThunks刷新访问令牌

从PWA中的内部存储读取文件

点击按钮一次有文本出现和褪色,而不是点击两次?(html,CSS,JavaScript)

为什么这个JS模块在TypeScript中使用默认属性导入?""

如何在输入元素中附加一个属性为checkbox?

并不是所有的iframe都被更换

如何避免页面第一次加载时由于CSS样式通过JavaScript更改而出现闪烁

使用领域Web SDK的Vite+Vue应用程序中的Web程序集(WASM)错误

在浏览器中触发插入事件时检索编码值的能力

将异步回调转换为异步生成器模式

在VS代码上一次设置多个变量格式

当代码另有说明时,随机放置的圆圈有时会从画布上消失

在Odoo中如何以编程方式在POS中添加产品

将相关数据组合到两个不同的数组中

Jexl to LowerCase()和Replace()

为什么我不能使用其同级元素调用和更新子元素?

固定动态、self 调整的优先级队列

使用静态函数保存 node 前的钩子

Reaction-在同一页内滚动导航(下拉菜单)