javascript - 防止在表单提交/Node 后重新加载页面(没有可用的 ajax)

Question

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

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

有什么更好的方法吗？ 谢谢!

Answer 1

感谢在评论中回答我的问题的两位! 他们的两个解决方案都有效，它们在这里:

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

谢谢两位评论员!使用他们的链接找到更多相关信息!