防止頁面重新加載表單提交/節點（沒有AJAX可用）

好日子，我有一個表格發送字段和文件到node.js服務器。在服務器上解析的數據由Formidable。一切工作都很好，但在表單提交後，它會加載一個帶有響應的頁面。有誰知道發送帶有標準表單機制的數據的方式和不能重新加載頁面（由於文件的格式爲，因此序列化的jQuery ajax方法不起作用）或者在服務器上寫入這樣的響應，以致它不會觸發頁面重裝。形式：防止頁面重新加載表單提交/節點（沒有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'); 
    }); 
});

任何更好的方法來做到這一點？謝謝！

來源

2014-03-04 Serg Nights

請看看[這個問題]（http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery）及其答案可以幫助你。爲了清楚起見，其中的答案是關於使用Javascript甚至JQuery來解決它。 –

看看http://blog.w3villa.com/programming/upload-image-without-submitting-form-works-on-all-browsers/ –

你做了什麼？我看到你接受了答案，但我不知道它是否適用於我。 – Tenz

感謝兩位回答我的問題的人！無論他們的解決方案都工作在這裏，他們是：

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

謝謝你們兩位評論員！使用他們的鏈接找到更多關於它！

來源

2014-03-05 02:25:12

防止頁面重新加載表單提交/節點（沒有AJAX可用）

回答

相關問題