表单提交/节点后防止页面重新加载（没有可用的 ajax）

Posted 2023-02-22

【中文标题】表单提交/节点后防止页面重新加载（没有可用的 ajax）

【英文标题】：Prevent page reload after form submit / node (no ajax available)

【发布时间】：2014-04-05 11:20:30

【问题描述】：

美好的一天，我有一个表单用于将字段和文件发送到 node.js 服务器。在服务器上，由 Formidable 解析的数据。一切正常，但是在提交表单后，它会加载一个带有响应的页面。 有谁知道使用标准表单机制发送数据的方式和不重新加载页面（带有序列化的jQuery ajax方法由于form中的文件而不起作用）要么写这样服务器上的响应，因此它不会触发页面重新加载。 表格：

<form action="/upload" enctype="multipart/form-data" method="post" id="eventForm">
<label>Date</label>
<input type="text" name="date"/>
<label>Image</label>
<input type="file" multiple="multiple" name="picture" />
<input type="submit" value="Submit!" />
</form>

服务器端：

app.post('/upload', function (req, res) 
    var form = new formidable.IncomingForm();
    // save file code goes here 
    form.parse(req, function(err, fields, files) 
        //response code goes here
        res.send('done');
    );
);

有更好的方法吗？ 谢谢！

【问题讨论】：

请查看this question 及其答案是否对您有帮助。需要明确的是，其中的答案是关于使用 javascript 甚至 JQuery 来解决它。

看看blog.w3villa.com/programming/…

你做了什么？我看到你接受了答案，但我不知道它是否适合我。

【参考方案1】：

感谢两位在 cmets 中回答我的问题的人！ 他们的两个解决方案都有效，他们在这里：

1) 最简单：在表单后添加不可见的 iframe 并将其指定为表单的目标：

<form action="/upload" enctype="multipart/form-data" method="post" id="eventForm" target="uploader_iframe">
//....
</form>
<iframe id="uploader_iframe" name="uploader_iframe" style="display: none;"></iframe>

2) 正确：其实用AJAX发送同样的数据并不难，你只需要指定一些参数就可以了。这是一个代码：

$('#eventForm').submit(function (e) 
        e.preventDefault();
        var fd = new FormData($(this)[0]);
        $.ajax(
            url: '/upload',
            data: fd,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data)
                console.log(data);
            
        );
);

感谢两位评论员！使用他们的链接了解更多信息！