양식.제출 응답을 캡처하려면 어떻게 해야 합니까?
다음 코드가 있습니다.
<script type="text/javascript">
function SubmitForm()
{
form1.submit();
}
function ShowResponse()
{
}
</script>
.
.
.
<div>
<a href="#" onclick="SubmitForm();">Click</a>
</div>
html .form1.submit 해요 이거 어떻게 해요?form1.submit 메서드에 콜백 기능을 등록할 수 있습니까?
단순한 자바스크립트로는 쉽게 할 수 없을 것입니다.양식을 게시하면 양식 입력이 서버로 전송되고 페이지가 새로 고쳐집니다. 데이터는 서버에서 처리됩니다.submit()함수는 실제로 아무것도 반환하지 않고 양식 데이터를 서버로 전송할 뿐입니다.
(페이지 새로 고침 없이) 자바스크립트로 응답을 얻고 싶다면 AJAX를 사용해야 하며, AJAX를 사용하는 것에 대해 이야기하기 시작할 때 라이브러리를 사용해야 합니다. jQuery는 단연코 가장 인기 있고, 제가 개인적으로 가장 좋아하는 것입니다.폼(Form)이라는 jQuery용 훌륭한 플러그인이 있습니다. 당신이 원하는 대로 바로 해줄 것입니다.
jQuery와 플러그인을 사용하는 방법은 다음과 같습니다.
$('#myForm')
.ajaxForm({
url : 'myscript.php', // or whatever
dataType : 'json',
success : function (response) {
alert("The server says: " + response);
}
})
;
12me21의 댓글에서 추출한 non-jQuery vanilla 자바스크립트 방식:
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-url 인코딩"입니다.만약 당신이 "다른 것"을 보내거나 그것을 조정하고 싶다면 어떻게든 여기를 참고하세요. 약간의 사소한 세부사항들을.
않는 아약스 의입니다를 입니다.<iframe>다의.<iframe>s에onload조련사아약스가 왜 을 쓰죠?아약스가 있는데 왜 신경을 쓰죠?
참고: 답변 중 일부에서 Ajax 없이는 이를 달성할 수 없다는 의견이 있어 이 대안을 언급하고자 했습니다.
향후 인터넷 검색자:
새로운 브라우저(2018년 현재 Chrome, Firefox, Safari, Opera, Edge 및 IE가 아닌 대부분의 모바일 브라우저)의 경우 비동기 네트워크 호출을 단순화하는 표준 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합니다.formevent.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(아직)에 대해 언급하지 않았습니다.하지만 타겟="my"라고 말합니다.프레임" 트릭이 더 이상 사용되지 않습니다.또한 '제출' 이벤트에 대한 form.addEventListener 예제도 있습니다.
저는 이런 식으로 하고 있고 효과가 있습니다.
$('#form').submit(function(){
$.ajax({
url: $('#form').attr('action'),
type: 'POST',
data : $('#form').serialize(),
success: function(){
console.log('form submitted.');
}
});
return false;
});
나는 당신이 제출하는 것을 이해할 수 있을지 잘 모르겠습니다.
는.form1.submit();양식 정보는 웹서버로 전송됩니다.
웹 서버는 자신이 해야 할 일은 무엇이든 하고 완전히 새로운 웹 페이지를 클라이언트에게 반환합니다(일반적으로 변경된 페이지와 동일).
따라서 form.submit() 작업의 반환을 " 포착"할 수 있는 방법은 없습니다.
콜백이 없습니다.링크를 따라가는 것과 같습니다.
하려면 AJAX 를하거나 Iframe 하고 Iframe .onload()이벤트성의
넌 할 수 있다.event.preventDefault()합니다를 합니다.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>
Chrome을 사용하여 AJAX 요청의 출력을 캡처하려는 경우 다음과 같은 간단한 단계를 수행할 수 있습니다.
- 프로그래머 도구 상자 열기
- 콘솔로 이동하여 콘솔 안의 모든 위치로 이동
- 나타나는 메뉴에서 "XMXHTTP Request Logging 사용"을 클릭합니다.
- 그러면 AJAX 요청을 할 때마다 "XHR remitted loading:http://..."로 시작하는 메시지가 콘솔에 나타납니다.
- 나타나는 링크를 클릭하면 머리글과 응답 내용을 볼 수 있는 "Resources(리소스)" 탭이 나타납니다.
@ 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를 사용하여 following code를 정확히 실행합니다.
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!");
}
});
//
}
AJAX를 사용해야 합니다.양식을 제출하면 일반적으로 브라우저에서 새 페이지를 로드합니다.
자바스크립트와 AJAX 기술을 이용해서 할 수 있습니다.jquery와 이 양식 플러그인을 보세요.form.submit에 대한 콜백을 등록하려면 js 파일 두 개만 포함하면 됩니다.
jQuery와 메서드를 사용하여 이 작업을 수행할 수 있습니다.
<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>먼저 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
}
});
jQuery.post ()를 사용하여 서버에서 잘 구성된 JSON 응답을 반환할 수 있습니다.또한 데이터를 서버에서 직접 검증/위생할 수 있도록 해주기 때문에 클라이언트에서 이 작업을 수행하는 것보다 더 안전하고 더 쉽기 때문에 좋은 방법입니다.
예를 들어 단순 등록을 위해 사용자 데이터와 함께 HTML 양식을 서버에 게시(profile changes.php 저장)해야 하는 경우:
I. 클라이언트 부분:
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
}
});
});
});
II. 서버 부분(save profile changes.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;
}
}
$(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())로 사용하는e('formid').submit(function(event))그런 해당 폼출 ajax합니다 후 합니다.$.ajax({, , , , });
요구 사항에 따라 선택할 수 있는 매개 변수를 사용한 후 함수를 호출합니다.
success:function(data) {
// do whatever you want my example to put response html on div
}
아약스 없이도 그렇게 할 수 있습니다.
아래에 당신의 좋아요를 적으세요.
.. .. ..
그리고 "액션. php"에서
그런 다음 frmLogin.submit();
변수 $ submit_return을 읽습니다.
$submit_return에 반환값이 포함되어 있습니다.
행운을 빌어요.
언급URL : https://stackoverflow.com/questions/374644/how-do-i-capture-response-of-form-submit
'source' 카테고리의 다른 글
| Python 해시 가능한 명령어 (0) | 2023.09.19 |
|---|---|
| setInterval을 중지하는 방법 (0) | 2023.09.19 |
| Angular.js: 탐지되지 않은 오류, 모듈 없음: myapp (0) | 2023.09.19 |
| MySQL의 복합 FULLTEXT 인덱스 (0) | 2023.09.19 |
| JQuery html() 대 내부 HTML (0) | 2023.09.19 |