我如何捕获表单的响应

我有以下密码:

<script type="text/javascript">
function SubmitForm()
{


form1.submit();
}


function ShowResponse()
{


}
</script>
.
.
.
<div>
<a href="#" onclick="SubmitForm();">Click</a>
</div>

我想捕获的超文本标记语言的 form1.submit响应？我该怎么做？我是否可以将任何回调函数注册到 form1.commit 方法？

432225 次浏览
小开

你需要使用 AJAX。提交表单通常会导致浏览器加载一个新页面。

小开

我不确定您是否理解 subit ()是做什么的..。

当您执行 form1.submit();时，表单信息将被发送到 webserver。

WebServer 将执行其应该执行的任何操作，并向客户端返回一个全新的网页(通常是同一个页面，但发生了一些变化)。

因此，您不可能“捕捉”form.mit ()操作的返回。

小开

没有回调，就像是跟随一个链接。

如果您想捕获服务器响应，可以使用 AJAX 或将其发布到一个 Iframe，并获取在 Iframe 的 onload()事件之后出现的内容。

小开

您可以使用 javascript 和 AJAX 技术来实现这一点。看看 jquery 和这个 表格插头。您只需要包含两个 js 文件就可以为 form.mit 注册一个回调。

小开
最佳答案

使用普通的 javascript 是无法轻松实现这一点的。发布表单时，表单输入被发送到服务器，页面被刷新——数据在服务器端进行处理。也就是说，submit()函数实际上不返回任何内容，它只是将表单数据发送给服务器。

如果你真的想用 Javascript 获得响应(不需要刷新页面) ，那么你需要使用 AJAX，当你开始讨论使用 AJAX 时，你将使用 需要库。JQuery是目前为止最受欢迎的，也是我个人最喜欢的。有一个非常棒的 jQuery 插件叫 表格，它可以做你想要做的事情。

下面是使用 jQuery 和插件的方法:

$('#myForm')
.ajaxForm({
url : 'myscript.php', // or whatever
dataType : 'json',
success : function (response) {
alert("The server says: " + response);
}
})
;
小开

另一种 Ajax 替代方法是将一个不可见的 <iframe>设置为表单的目标，并在其 onload处理程序中读取该 <iframe>的内容。但有阿贾克斯干嘛还费劲呢？

注意: 我只是想提一下这个替代方案，因为一些答案声称 不可能可以在没有 Ajax 的情况下实现这一点。

小开

如果你想使用 Chrome 捕获一个 AJAX 请求的输出，你可以遵循以下简单的步骤:

  1. 打开程序员工具箱
  2. 去控制台，在里面的任何地方
  3. 在出现的菜单中，单击“启用 XMXHTTPRequest 日志记录”
  4. 在每次执行 AJAX 请求之后，控制台中都会出现以“ XHR 完成加载: 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()，以确保 HTML 表单默认的 submit事件不会触发(这将导致页面刷新)。

另一种替代方法是使用黑客表单标记: 使用 <form>和 type="submit"会阻碍所需的行为; 因为它们最终会导致点击事件刷新页面。

如果您仍然想使用 <form>，而且不想编写自定义的单击处理程序，那么可以使用 jQuery 的 ajax方法，该方法通过公开 success、 error等的承诺方法为您抽象出整个问题。

总结一下，你可以通过以下两种方式来解决你的问题:

‧使用 event.preventDefault()防止处理功能出现预设行为

•使用没有默认行为的元素(例如 <form>)

•使用 jQuery ajax

(我刚注意到这个问题是2008年的，不知道为什么会出现在我的回复中; 无论如何，希望这是一个明确的答案)

小开

没有 Ajax 你也能做到。

写下你的喜好。

.. .. ..

然后是 action.php

然后在 frmLogin.mit ()之后;

读取变量 $mit _ return. 。

$commit _ return 包含返回值。

祝你好运。

小开

你可以使用 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>

小开 
    $.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
}
});
小开

这是我解决这个问题的代码:

<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>
小开

基于@rajesh _ kw (https://stackoverflow.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://stackoverflow.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 成功返回，所以我呈现它并替换当前页面，在我的例子中，如果会话超时，我希望重定向到登录页面，所以我拦截这个重定向以保持页面的状态。

现在用户可以通过另一个选项卡登录并再次尝试提交。

小开 
 $(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
}
小开

首先，我们需要 seralizeObject () ;

$.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
}


});
小开

我有下面的代码完美地运行与多部分形式的数据使用 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!");
}




});




//


}
小开

您可以使用 Post ()并从服务器返回结构良好的 JSON 应答。它还允许您直接在服务器上验证/清除数据，这是一个很好的实践，因为它比在客户机上更安全(甚至更容易)。

例如，如果您需要将带有用户数据的 html 表单发布到服务器(saveprofilechanges.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;
}
}
小开

从12me21的评论中摘录的非 jQuery 的普通 Javascript 方式:

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-urlencode”，它与我们在上面的代码片段中发送的内容相匹配。如果你想发送“其他东西”或调整它以某种方式看到一些细节的细节 给你。

小开

未来的互联网搜索者:

对于新的浏览器(截至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((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json(); // or response.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年的那个页面没有提到获取(还没有)。 但是它提到了 target = “ myIFrame”技巧是不推荐的。 它还有一个用于“ commit”事件的 form.addEventListener 示例。


提交答案