防止页面重新加载表单提交/节点（没有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可用）

回答

相关问题