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