如何捕获 form.submit 的响应
Posted
技术标签:
【中文标题】如何捕获 form.submit 的响应【英文标题】：How do I capture response of form.submit 【发布时间】：2010-09-27 08:11:32 【问题描述】：我有以下代码：
<script type="text/javascript">
function SubmitForm()
form1.submit();
function ShowResponse()
</script>
.
.
.
<div>
<a href="#" onclick="SubmitForm();">Click</a>
</div>
我想捕获form1.submit的html响应？我该怎么做呢？我可以注册任何回调函数到 form1.submit 方法吗？
【问题讨论】：
【参考方案1】：您将无法使用纯 javascript 轻松做到这一点。当您发布表单时，表单输入被发送到服务器并刷新您的页面 - 数据在服务器端处理。也就是说，submit() 函数实际上并没有返回任何内容，它只是将表单数据发送到服务器。
如果您真的想在 Javascript 中获得响应（不刷新页面），那么您需要使用 AJAX，当您开始谈论使用 AJAX 时，您将需要使用图书馆。 jQuery 是迄今为止最受欢迎的，也是我个人最喜欢的。有一个很棒的 jQuery 插件，名为 Form，它可以完全按照您的要求进行操作。
下面是你如何使用 jQuery 和那个插件：
$('#myForm')
.ajaxForm(
url : 'myscript.php', // or whatever
dataType : 'json',
success : function (response)
alert("The server says: " + response);
)
;
【讨论】：
+1 用于 jQuery 表单插件。太棒了，但是您的“目标”属性错误。它不像表单的“动作”属性；即它不是提交目的地。来自docs：目标 - 标识页面中要使用服务器响应更新的元素。 公平地说，您不需要为 AJAX 使用库。库是使用 javascript 编写的，因此存在非库解决方案。也就是说，我 100% 赞成使用库来抽象 AJAX 调用所涉及的所有荒谬和复杂性。 我发布此评论更多是作为上述解决方案有效的仅供参考，但在 IE 9 及更低版本上通过 AJAX 上传文件时除外。我在非 HTML5 IE 浏览器（IE 9 及更低版本）上通过 ajax 提交文件时遇到问题，因此我必须使用 iframe hack。但是使用 iframe hack 需要 form.submit()，但是你不能等待响应告诉你它是否成功。这让我陷入了困境。 在这里使用库真的不值得。在纯 JS 中，代码并不复杂：var xhr = new XMLHttpRequest() xhr.open("POST", "myscript.php"); xhr.onload=function(event) alert("The server says: " + event.target.response); ; var formData = new FormData(document.getElementById("myForm")); xhr.send(formData);【参考方案2】：
Ajax 替代方法是将不可见的<iframe> 设置为表单的目标，并在其onload 处理程序中读取该<iframe> 的内容。但是，既然有 Ajax，为什么还要麻烦呢？
注意：我只是想提一下这个替代方案，因为一些答案声称没有 Ajax 就不可能实现这一目标。
【讨论】：
如果您想通过单击按钮发布到 URL 以进行下载？现在您不能使用 Ajax 来处理您的请求。想要在下载完成后清理或更新界面？现在是时候从 不是 Ajax 的 POST 中获得回调了。 （Necropost，我知道。） @Dropped.on.Caprica 是的，这仍然是<iframe> POST 的合法用例（回调到parent）。对于下载和上传...
据我所知，对于任何需要与旧版本 IE (7+) 兼容的人来说，我很确定 iframe 方法是唯一的方法。如果我错了，请纠正我，因为我现在遇到这个问题。
为了检测下载是否成功，我最近学到的一个巧妙的技巧是在下载响应中设置一个 cookie，并在浏览器中轮询该 cookie 的存在。
请注意，这仅在表单提交操作与 iframe 位于同一站点上时才有效。否则同源策略将阻止它。【参考方案3】：
非jQuery vanilla Javascript方式，摘自12me21的评论：
var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php");
xhr.onload = function(event)
alert("Success, server responded with: " + event.target.response); // raw response
;
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm"));
xhr.send(formData);
对于POST，默认内容类型是“application/x-www-form-urlencoded”，它与我们在上面的 sn-p 中发送的内容相匹配。如果您想发送“其他内容”或以某种方式对其进行调整，请参阅here 了解一些细节。
【讨论】：
其实这是正确答案！因为所有其他答案的作用完全相同，但被多一层库混淆了。 这看起来正是我所需要的，因为我已经有一个 PHP 文件在我的页面上处理许多直接 XMLHttpRequest()。但是对于具有典型 这对我来说是完美的。我正在编写一个 chrome 插件，并试图避免使用任何库，而是在服务器上处理更复杂的操作。这非常适合我的需要谢谢！【参考方案4】：未来的互联网搜索者：
对于新浏览器（截至 2018 年：Chrome、Firefox、Safari、Opera、Edge 和大多数移动浏览器，但不包括 IE），fetch 是一种标准 API，可简化异步网络调用 （为此我们曾经需要XMLHttpRequest 或jQuery 的$.ajax）。
这是一个传统的形式：
<form id="myFormId" action="/api/process/form" method="post">
<!-- form fields here -->
<button type="submit">SubmitAction</button>
</form>
如果将类似上述的表单交给您（或者您创建它是因为它是语义 html），那么您可以将 fetch 代码包装在事件侦听器中，如下所示：
document.forms['myFormId'].addEventListener('submit', (event) =>
event.preventDefault();
// TODO do something here to show user that form is being submitted
fetch(event.target.action,
method: 'POST',
body: new URLSearchParams(new FormData(event.target)) // event.target is the form
).then((resp) =>
return resp.json(); // or resp.text() or whatever the server sends
).then((body) =>
// TODO handle body
).catch((error) =>
// TODO handle error
);
);
（或者，如果您想在没有提交事件的情况下手动调用原始海报，只需将fetch 代码放在那里并传递对form 元素的引用而不是使用event.target。）
文档：
获取： https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
其他： https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript 2018 年的那个页面没有提到 fetch（还）。 但它提到 target="myIFrame" 技巧已被弃用。 它还有一个用于“提交”事件的 form.addEventListener 示例。
【讨论】：
来自 MDN 的重要说明：“从 fetch() 返回的 Promise 不会拒绝 HTTP 错误状态，即使响应是 HTTP 404 或 500。相反，它将正常解决（ok 状态设置为 false），并且它只会在网络故障或任何阻止请求完成的情况下拒绝。”这意味着then 回调必须检查 HTTP 状态。【参考方案5】：
我正在这样做并且它的工作原理。
$('#form').submit(function()
$.ajax(
url: $('#form').attr('action'),
type: 'POST',
data : $('#form').serialize(),
success: function()
console.log('form submitted.');
);
return false;
);
【讨论】：
您可能想要event.preventDefault();（event = 提交函数的第一个参数）而不是return false。返回 false 不仅会阻止浏览器提交表单，还会阻止其他可能很重要的副作用发生。 There 是 lots 的 questions 相关 to 这个。
嗯，是的，根据需要返回 false 或 preventDefault 或 stopPropogation。
如果您尝试输入类型=文件上传，您可能需要使用FormData($("myform")[0])。
为了更通用一点，您可以使用event.target.action 和$(event.target).serialize() 而不是$('#form').attr('action') 和$('#form').serialize()。【参考方案6】：
我不确定你是否理解 submit() 的作用...
当您执行form1.submit(); 时，表单信息将发送到网络服务器。
WebServer 将做它应该做的任何事情，并将一个全新的网页返回给客户端（通常是相同的页面，但有所改变）。
因此，您无法“捕捉” form.submit() 操作的返回。
【讨论】：
我创建了另一个 html 页面并将其作为响应返回。 你是怎么做到的@Khushboo【参考方案7】：没有回调。这就像点击一个链接。
如果您想捕获服务器响应，请使用 AJAX 或将其发布到 iframe 并获取 iframe 的 onload() 事件之后出现的内容。
【讨论】：
【参考方案8】：您可以在提交按钮的单击处理程序中 event.preventDefault() 确保不会触发 HTML 表单默认的 submit 事件（这会导致页面刷新）。
另一种选择是使用 hackier 表单标记：使用 <form> 和 type="submit" 阻碍了此处所需的行为；因为这些最终会导致点击事件刷新页面。
如果您仍想使用<form>，并且不想编写自定义点击处理程序，则可以使用jQuery 的ajax 方法，它通过公开success 的promise 方法为您抽象出整个问题、error等
回顾一下，您可以通过以下任一方式解决您的问题：
• 通过使用event.preventDefault() 防止处理函数中的默认行为
• 使用没有默认行为的元素（例如<form>）
• 使用 jQuery ajax
（我刚刚注意到这个问题来自 2008 年，不知道为什么它会出现在我的提要中；无论如何，希望这是一个明确的答案）
【讨论】：
【参考方案9】： $.ajax(
url: "/users/login/", //give your url here
type: 'POST',
dataType: "json",
data: logindata,
success: function ( data )
// alert(data); do your stuff
,
error: function ( data )
// alert(data); do your stuff
);
【讨论】：
【参考方案10】：这是我解决这个问题的代码：
<form id="formoid" action="./demoText.php" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" >
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event)
/* stop form from submitting normally */
event.preventDefault();
/* get the action attribute from the <form action=""> element */
var $form = $( this ), url = $form.attr( 'action' );
/* Send the data using post with element id name and name2*/
var posting = $.post( url, name: $('#name').val() );
/* Alerts the results */
posting.done(function( data )
alert('success');
);
);
</script>
【讨论】：
【参考方案11】：如果您想使用 Chrome 捕获 AJAX 请求的输出，您可以按照以下简单步骤操作：
-
打开程序员工具箱
转到控制台并直接在其中的任何位置
在出现的菜单中，点击“启用 XMXHTTPRequest 日志记录”
每次发出 AJAX 请求后，控制台中都会出现一条以“XHR 完成加载：http://......”开头的消息。
点击显示的链接，将打开“资源选项卡”，您可以在其中看到响应的标题和内容！
【讨论】：
【参考方案12】：基于@rajesh_kw (https://***.com/a/22567796/4946681) 的回答，我处理表单发布错误和成功：
$('#formName').on('submit', function(event)
event.preventDefault(); // or return false, your choice
$.ajax(
url: $(this).attr('action'),
type: 'post',
data: $(this).serialize(),
success: function(data, textStatus, jqXHR)
// if success, HTML response is expected, so replace current
if(textStatus === 'success')
// https://***.com/a/1236378/4946681
var newDoc = document.open('text/html', 'replace');
newDoc.write(data);
newDoc.close();
).fail(function(jqXHR, textStatus, errorThrown)
if(jqXHR.status == 0 || jqXHR == 302)
alert('Your session has ended due to inactivity after 10 minutes.\nPlease refresh this page, or close this window and log back in to system.');
else
alert('Unknown error returned while saving' + (typeof errorThrown == 'string' && errorThrown.trim().length > 0 ? ':\n' + errorThrown : ''));
);
);
我使用this 以便我的逻辑可重用，我希望 HTML 成功返回，因此我渲染它并替换当前页面，在我的情况下，我希望重定向到登录页面，如果会话超时，因此我拦截了该重定向以保留页面的状态。
现在用户可以通过另一个选项卡登录并再次尝试提交。
【讨论】：
【参考方案13】：我有以下代码使用 ajax 和多部分表单数据完全运行
function getUserDetail()
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var phoneNumber = document.getElementById("phoneNumber").value;
var gender =$("#userForm input[type='radio']:checked").val();
//var gender2 = document.getElementById("gender2").value;
//alert("fn"+firstName+lastName+username+email);
var roleIndex = document.getElementById("role");
var role = roleIndex.options[roleIndex.selectedIndex].value;
var jobTitleIndex = document.getElementById("jobTitle");
var jobTitle = jobTitleIndex.options[jobTitleIndex.selectedIndex].value;
var shiftIdIndex = document.getElementById("shiftId");
var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;
var addressLine1 = document.getElementById("addressLine1").value;
var addressLine2 = document.getElementById("addressLine2").value;
var streetRoad = document.getElementById("streetRoad").value;
var countryIndex = document.getElementById("country");
var country = countryIndex.options[countryIndex.selectedIndex].value;
var stateIndex = document.getElementById("state");
var state = stateIndex.options[stateIndex.selectedIndex].value;
var cityIndex = document.getElementById("city");
var city = cityIndex.options[cityIndex.selectedIndex].value;
var pincode = document.getElementById("pincode").value;
var branchIndex = document.getElementById("branch");
var branch = branchIndex.options[branchIndex.selectedIndex].value;
var language = document.getElementById("language").value;
var profilePicture = document.getElementById("profilePicture").value;
//alert(profilePicture);
var addDocument = document.getElementById("addDocument").value;
var shiftIdIndex = document.getElementById("shiftId");
var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;
var data = new FormData();
data.append('firstName', firstName);
data.append('lastName', lastName);
data.append('username', username);
data.append('email', email);
data.append('phoneNumber', phoneNumber);
data.append('role', role);
data.append('jobTitle', jobTitle);
data.append('gender', gender);
data.append('shiftId', shiftId);
data.append('lastName', lastName);
data.append('addressLine1', addressLine1);
data.append('addressLine2', addressLine2);
data.append('streetRoad', streetRoad);
data.append('country', country);
data.append('state', state);
data.append('city', city);
data.append('pincode', pincode);
data.append('branch', branch);
data.append('language', language);
data.append('profilePicture', $('#profilePicture')[0].files[0]);
for (var i = 0; i < $('#document')[0].files.length; i++)
data.append('document[]', $('#document')[0].files[i]);
$.ajax(
//url : '$pageContext.request.contextPath/user/save-user',
type: "POST",
Accept: "application/json",
async: true,
contentType:false,
processData: false,
data: data,
cache: false,
success : function(data)
reset();
$(".alert alert-success alert-div").text("New User Created Successfully!");
,
error :function(data, textStatus, xhr)
$(".alert alert-danger alert-div").text("new User Not Create!");
);
//
【讨论】：
【参考方案14】：您需要使用 AJAX。提交表单通常会导致浏览器加载一个新页面。
【讨论】：
【参考方案15】：您可以使用 javascript 和 AJAX 技术来做到这一点。看看 jquery 和这个form plug in。只需包含两个js文件即可为form.submit注册回调。
【讨论】：
【参考方案16】：您可以使用jQuery 和ajax() 方法完成此操作：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function submitform()
$.ajax(
headers:
'Accept': 'application/json',
'Content-Type': 'application/json'
,
type: "POST",
url : "/hello.hello",
dataType : "json",
data : JSON.stringify("hello_name": "hello"),
error: function ()
alert('loading Ajax failure');
,
onFailure: function ()
alert('Ajax Failure');
,
statusCode:
404: function()
alert("missing info");
,
success : function (response)
alert("The server says: " + JSON.stringify(response));
)
.done(function( data )
$("#result").text(data['hello']);
);
;</script>【讨论】：
【参考方案17】：首先我们需要serializeObject();
$.fn.serializeObject = function ()
var o = ;
var a = this.serializeArray();
$.each(a, function ()
if (o[this.name])
if (!o[this.name].push)
o[this.name] = [o[this.name]];
o[this.name].push(this.value || '');
else
o[this.name] = this.value || '';
);
return o;
;
然后你发一个基本的帖子并得到回应
$.post("/Education/StudentSave", $("#frmNewStudent").serializeObject(), function (data)
if(data)
//do true
else
//do false
);
【讨论】：
【参考方案18】：您可以使用jQuery.post() 并从服务器返回结构良好的 JSON 答案。它还允许您直接在服务器上验证/清理您的数据，这是一种很好的做法，因为它比在客户端上执行此操作更安全（甚至更容易）。
例如，如果您需要将带有用户数据的 html 表单发布到服务器（保存profilechanges.php）以进行简单注册：
我。客户端部分：
I.a. HTML部分：
<form id="user_profile_form">
<label for="first_name"><input type="text" name="first_name" id="first_name" required />First name</label>
<label for="family_name"><input type="text" name="family_name" id="family_name" required />Family name</label>
<label for="email"><input type="email" name="email" id="email" required />Email</label>
<input type="submit" value="Save changes" id="submit" />
</form>
I.b.脚本部分：
$(function ()
$("#user_profile_form").submit(function(event)
event.preventDefault();
var postData =
first_name: $('#first_name').val(),
family_name: $('#family_name').val(),
email: $('#email').val()
;
$.post("/saveprofilechanges.php", postData,
function(data)
var json = jQuery.parseJSON(data);
if (json.ExceptionMessage != undefined)
alert(json.ExceptionMessage); // the exception from the server
$('#' + json.Field).focus(); // focus the specific field to fill in
if (json.SuccessMessage != undefined)
alert(json.SuccessMessage); // the success message from server
);
);
);
二。服务器部分（saveprofilechanges.php）：
$data = $_POST;
if (!empty($data) && is_array($data))
// Some data validation:
if (empty($data['first_name']) || !preg_match("/^[a-zA-Z]*$/", $data['first_name']))
echo json_encode(array(
'ExceptionMessage' => "First name missing or incorrect (only letters and spaces allowed).",
'Field' => 'first_name' // Form field to focus in client form
));
return FALSE;
if (empty($data['family_name']) || !preg_match("/^[a-zA-Z ]*$/", $data['family_name']))
echo json_encode(array(
'ExceptionMessage' => "Family name missing or incorrect (only letters and spaces allowed).",
'Field' => 'family_name' // Form field to focus in client form
));
return FALSE;
if (empty($data['email']) || !filter_var($data['email'], FILTER_VALIDATE_EMAIL))
echo json_encode(array(
'ExceptionMessage' => "Email missing or incorrectly formatted. Please enter it again.",
'Field' => 'email' // Form field to focus in client form
));
return FALSE;
// more actions..
// more actions..
try
// Some save to database or other action..:
$this->User->update($data, array('username=?' => $username));
echo json_encode(array(
'SuccessMessage' => "Data saved!"
));
return TRUE;
catch (Exception $e)
echo json_encode(array(
'ExceptionMessage' => $e->getMessage()
));
return FALSE;
【讨论】：
【参考方案19】： $(document).ready(function()
$('form').submit(function(event)
event.preventDefault();
$.ajax(
url : "<wiki:action path='/your struts action'/>",//path of url where u want to submit form
type : "POST",
data : $(this).serialize(),
success : function(data)
var treeMenuFrame = parent.frames['wikiMenu'];
if (treeMenuFrame)
treeMenuFrame.location.href = treeMenuFrame.location.href;
var contentFrame = parent.frames['wikiContent'];
contentFrame.document.open();
contentFrame.document.write(data);
contentFrame.document.close();
);
);
);
首先在此使用$(document).ready(function())('formid').submit(function(event))，然后在调用ajax表单提交$.ajax(, , , , );后阻止默认操作
它会带参数你可以根据你的要求选择 然后调用一个函数
success:function(data)
// do whatever you want my example to put response html on div
【讨论】：
【参考方案20】：你可以在没有 ajax 的情况下做到这一点。
在下面写下你的喜欢。
.. .. ..
然后在“action.php”中
然后在frmLogin.submit();
读取变量 $submit_return..
$submit_return 包含返回值。
祝你好运。
【讨论】：
以上是关于如何捕获 form.submit 的响应的主要内容，如果未能解决你的问题，请参考以下文章
表单提交事件未捕获 OnSelectedIndexChanged？