Предотвратить перезагрузку страницы после отправки формы/узла (нет доступного ajax)

Добрый день, у меня есть форма для отправки полей и файла на сервер 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');
    });
});

Есть ли лучшие способы сделать это? Благодарю вас!


node.js javascript forms ajax formidable
person Serg Nights    schedule 04.03.2014    source источник
comment
Посмотрите, есть ли этот вопрос и его ответы помогает вам. Чтобы было ясно, ответы в нем касаются решения с помощью Javascript или даже JQuery.   -  person barry-johnson    schedule 04.03.2014
comment
взгляните на blog.w3villa .com/программирование/   -  person Ishank Gupta    schedule 04.03.2014
comment
что ты сделал? Я вижу, вы принимаете ответ, но я не знаю, работает ли он для меня.   -  person Tenz    schedule 13.02.2018

Ответы (1)


arrow_upward
7
arrow_downward

Спасибо обоим людям, которые ответили в комментариях на мой вопрос! Оба их решения работают, и вот они:

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

Спасибо обоим комментаторам! Используйте их ссылки, чтобы узнать больше об этом!

person Serg Nights    schedule 05.03.2014