Une autre option consiste à utiliser une iframe et à y définir la cible du formulaire.
Vous pouvez essayer ceci (il utilise jQuery) :
function ajax_form($form, on_complete) { var iframe; if (!$form.attr('target')) { //為表單創(chuàng)建一個(gè)唯一的iframe iframe = $("<iframe></iframe>").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body')); $form.attr('target', iframe.attr('name')); } if (on_complete) { iframe = iframe || $('iframe[name="' + $form.attr('target') + '"]'); iframe.load(function () { //獲取服務(wù)器響應(yīng) var response = iframe.contents().find('body').text(); on_complete(response); }); } }
Cela fonctionne dans tous les navigateurs et vous n'avez pas besoin de sérialiser ou de préparer des données. Un inconvénient est que vous ne pouvez pas suivre les progrès.
De plus, au moins pour Chrome, la requête n'appara?t pas sous l'onglet "xhr" dans les outils de développement, mais sous "doc".
Le problème que j'ai eu était d'utiliser le mauvais identifiant jQuery.
Vous pouvez utiliser un formulaire utilisant ajax pour télécharger des données et des fichiers.
PHP + HTML
<?php print_r($_POST); print_r($_FILES); ?> <form id="data" method="post" enctype="multipart/form-data"> <input type="text" name="first" value="Bob" /> <input type="text" name="middle" value="James" /> <input type="text" name="last" value="Smith" /> <input name="image" type="file" /> <button>提交</button> </form>
jQuery + Ajax
$("form#data").submit(function(e) { e.preventDefault(); var formData = new FormData(this); $.ajax({ url: window.location.pathname, type: 'POST', data: formData, success: function (data) { alert(data) }, cache: false, contentType: false, processData: false }); });
Version simplifiée
$("form#data").submit(function(e) { e.preventDefault(); var formData = new FormData(this); $.post($(this).attr("action"), formData, function(data) { alert(data); }); });