Как мне получить ответ form.submit
https://stackoverflow.com/questions/374644
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
У меня есть следующий код:
<script type="text/javascript">
function SubmitForm()
{
form1.submit();
}
function ShowResponse()
{
}
</script>
.
.
.
<div>
<a href="#" onclick="SubmitForm();">Click</a>
</div>
Я хочу захватить html-ответ form1.submit?Как мне это сделать?Могу ли я зарегистрировать любую функцию обратного вызова для метода form1.submit?
Решение
Вы не сможете сделать это легко с помощью простого 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> в качестве цели вашей формы и прочитайте ее содержимое <iframe> в своем onload обработчик.Но зачем беспокоиться, когда есть «Аякс»?
Примечание: Я просто хотел упомянуть эту альтернативу, поскольку в некоторых ответах утверждается, что это невозможный добиться этого без Ajax.
Я делаю это таким образом, и это работает.
$('#form').submit(function(){
$.ajax({
url: $('#form').attr('action'),
type: 'POST',
data : $('#form').serialize(),
success: function(){
console.log('form submitted.');
}
});
return false;
});
Способ, не связанный с jQuery, извлеченный из комментария 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», который соответствует тому, что мы отправляем в приведенном выше фрагменте.Если вы хотите отправить «другие вещи» или как-то настроить их, см. здесь для некоторых мельчайших подробностей.
Я не уверен, что вы понимаете, что делает submit()...
Когда ты это делаешь form1.submit(); информация формы отправляется на веб-сервер.
Веб-сервер сделает все, что должен, и вернет клиенту новую веб-страницу (обычно ту же самую страницу с чем-то измененным).
Таким образом, вы не сможете «перехватить» возврат действия form.submit().
Будущие интернет-поисковики:
Для новых браузеров (по состоянию на 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 году выборка не упоминается (пока).Но там упоминается, что трюк target="myIFrame" устарел.А также есть пример form.addEventListener для события отправки.
Обратного звонка нет.Это как перейти по ссылке.
Если вы хотите получить ответ сервера, используйте AJAX или опубликуйте его в iframe и получите то, что появляется там после iframe. onload() событие.
Ты можешь event.preventDefault() в обработчике кликов для кнопки отправки, чтобы убедиться, что HTML-форма по умолчанию submit событие не срабатывает (что приводит к обновлению страницы).
Другой альтернативой было бы использование хакерской разметки формы:Это использование <form> и type="submit" здесь это мешает желаемому поведению;поскольку это в конечном итоге приводит к тому, что события кликов обновляют страницу.
Если вы хотите по-прежнему использовать <form>, и вы не хотите писать собственные обработчики кликов, вы можете использовать jQuery ajax метод, который абстрагирует всю проблему, предоставляя методы обещания для success, error, и т. д.
Подводя итог, вы можете решить свою проблему одним из следующих способов:
• предотвращение поведения по умолчанию в функции обработки с помощью event.preventDefault()
• использование элементов, которые не имеют поведения по умолчанию (например, <form>)
• использование jQuery ajax
(я только что заметил, что этот вопрос за 2008 год, не знаю, почему он появился в моей ленте;во всяком случае, надеюсь, это четкий ответ)
$.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>
Если вы хотите получить вывод запроса AJAX с помощью Chrome, вы можете выполнить следующие простые шаги:
- Откройте панель инструментов программистов.
- Заходим в консоль и прямо в любом месте внутри нее
- В появившемся меню нажмите «Включить ведение журнала XMXHTTPRequest».
- После этого каждый раз, когда вы делаете запрос AJAX, в вашей консоли будет появляться сообщение, начинающееся с «XHR завершилась загрузка: http://......».
- При нажатии на появившуюся ссылку откроется вкладка «Ресурсы», где вы сможете увидеть заголовки и содержание ответа!
Основываясь на ответе @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 будет возвращен в случае успеха, поэтому я визуализирую его и заменяю текущую страницу, и в моем случае я ожидаю перенаправления на страницу входа в систему, если время сеанса истекло, поэтому я перехватываю это перенаправление чтобы сохранить состояние страницы.
Теперь пользователи могут войти в систему через другую вкладку и повторить попытку отправки.
Вам нужно использовать AJAX.Отправка формы обычно приводит к загрузке новой страницы браузером.
Вы можете сделать это, используя JavaScript и технологию AJAX.Посмотрите на jquery и на это плагин формы.Вам нужно всего лишь включить два js-файла, чтобы зарегистрировать обратный вызов для form.submit.
Вы можете сделать это, используя 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> $(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();
}
});
});
});
Цитата
Firrst All используйте $ (document) .ready (function ()) внутри этого использования ('formid'). отправить (function (event))), а затем предотвратить действие по умолчанию Aftyer, который вызывает заявку формы ajax $ .ajax ({,,, ,});Это потребует параметров, который вы можете выбрать в соответствии с вашим требованием, а затем вызовуте вызов успеха: function (data) {// Делать все, что вы хотите, мой пример поместил HTML -ответ на Div}
Прежде всего нам понадобится 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
}
});
У меня есть следующий код, который отлично работает с использованием 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!");
}
});
//
}
Вы можете использовать jQuery.post() и возвращать с сервера хорошо структурированные ответы JSON.Это также позволяет вам проверять/обеззараживать ваши данные непосредственно на сервере, что является хорошей практикой, поскольку это более безопасно (и даже проще), чем делать это на клиенте.
Например, если вам нужно отправить на сервер html-форму (сохранитьprofilechanges.php) с данными пользователя для простой регистрации:
Я.Клиентские части:
Я.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>
И.б.Часть сценария:
$(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
}
});
});
});
II.Серверная часть (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;
}
}
вы можете сделать это без ajax.
напишите лайк ниже.
.. .. ..
а затем в «action.php»
затем после frmLogin.submit();
прочитать переменную $submit_return..
$submit_return содержит возвращаемое значение.
удачи.
