在表单提交/节点之后阻止页面重新加载(没有可用的ajax)

Question

美好的一天,我有一个表单,用于将字段和文件发送到node.js服务器.在服务器上由Formidable解析的数据.一切都运行良好,但在表单提交后,它会加载一个带有响应的页面.有没有人知道使用标准表单机制发送数据的方式而不是重新加载页面(带有serialize的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);
            }
        });
});

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