P粉7941776592023-08-21 09:06:07
另一种选择是使用iframe并将表单的目标设置为它。
你可以尝试这样做(它使用jQuery):
function ajax_form($form, on_complete) { var iframe; if (!$form.attr('target')) { //为表单创建一个唯一的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 () { //获取服务器响应 var response = iframe.contents().find('body').text(); on_complete(response); }); } }
它适用于所有浏览器,您不需要序列化或准备数据。 一个缺点是您无法监视进度。
此外,至少对于Chrome来说,请求不会出现在开发者工具的“xhr”选项卡下,而是出现在“doc”下。
P粉0644484492023-08-21 00:11:35
我遇到的问题是使用了错误的jQuery标识符。
您可以使用一个表单使用ajax来上传数据和文件。
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 }); });
简化版本
$("form#data").submit(function(e) { e.preventDefault(); var formData = new FormData(this); $.post($(this).attr("action"), formData, function(data) { alert(data); }); });