[JQUERY] 어떻게 재 지정없이 HTML 양식을 제출
JQUERY어떻게 재 지정없이 HTML 양식을 제출
해결법
-
1.당신이 원하는 것을 달성하기 위해, 당신은 다음과 같이 jQuery를 아약스를 사용해야합니다 :
당신이 원하는 것을 달성하기 위해, 당신은 다음과 같이 jQuery를 아약스를 사용해야합니다 :
$('#myForm').submit(function(e){ e.preventDefault(); $.ajax({ url: '/Car/Edit/17/', type: 'post', data:$('#myForm').serialize(), success:function(){ // Whatever you want to do after the form is successfully submitted } }); });
또한이 하나를 시도해보십시오 :
function SubForm(e){ e.preventDefault(); var url = $(this).closest('form').attr('action'), data = $(this).closest('form').serialize(); $.ajax({ url: url, type: 'post', data: data, success: function(){ // Whatever you want to do after the form is successfully submitted } }); }
이것은 완벽하게 일했다. 내가 Html.ActionLink에서이 함수를 호출 (...)
function SubForm (){ $.ajax({ url: '/Person/Edit/@Model.Id/', type: 'post', data: $('#myForm').serialize(), success: function(){ alert("worked"); } }); }
-
2.당신은 눈에 보이지 않는
당신은 눈에 보이지 않는
<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe> <form action="submitscript.php" target="dummyframe"> <!-- Form body here --> </form>
-
3.페이지의 맨 아래에 숨겨진 iframe이를 놓고 양식에 대상 :
페이지의 맨 아래에 숨겨진 iframe이를 놓고 양식에 대상 :
<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe> <form action="/Car/Edit/17" id="myForm" method="post" name="myForm" target="hiddenFrame"> ... </form>
빠르고 쉬운. 대상 속성이 여전히 광범위하게 지원 (및 HTML5 지원)하는 동안, 그것은 HTML 4.01에서 사용되지 않습니다 있음을 유의하십시오.
당신은 정말 미래 지향적으로 Ajax를 사용해야합니다 그래서.
-
4.현재의 모든 답변은 iframe에 jQuery를 또는 트릭을 사용하기 때문에, 그냥 일반 자바 스크립트 방법을 추가 할 해가없는 생각 :
현재의 모든 답변은 iframe에 jQuery를 또는 트릭을 사용하기 때문에, 그냥 일반 자바 스크립트 방법을 추가 할 해가없는 생각 :
function formSubmit(event) { var url = "/post/url/here"; var request = new XMLHttpRequest(); request.open('POST', url, true); request.onload = function() { // request successful // we can use server response to our request now console.log(request.responseText); }; request.onerror = function() { // request failed }; request.send(new FormData(event.target)); // create FormData from form that triggered event event.preventDefault(); } // and you can attach form submit event like this for example function attachFormSubmitEvent(formId){ document.getElementById(formId).addEventListener("submit", formSubmit); }
-
5.그래, 나는이 없기 때문에 당신이 그 일의 마법의 방법을 말하지 않을거야. 폼 요소에 대한 설정 작업 속성이있는 경우, 그것은 리디렉션합니다.
그래, 나는이 없기 때문에 당신이 그 일의 마법의 방법을 말하지 않을거야. 폼 요소에 대한 설정 작업 속성이있는 경우, 그것은 리디렉션합니다.
당신은 단순히 조치를 설정하고 설정 onsubmit =하지 않는 리디렉션하지 않으려면 "된 SomeFuncion ();"
당신 된 SomeFuncion ()에서 당신이 (AJAX와 함께 여부)와 결말에서 원하는 무엇이든, 당신은 반환 거짓을 추가; 양식을 제출하지 않는 브라우저에게 ...
-
6.당신은 일어날 수 있도록 Ajax를해야합니다. 이 같은:
당신은 일어날 수 있도록 Ajax를해야합니다. 이 같은:
$(document).ready(function(){ $("#myform").on('submit', function(){ var name = $("#name").val(); var email = $("#email").val(); var password = $("#password").val(); var contact = $("#contact").val(); var dataString = 'name1=' + name + '&email1=' + email + '&password1=' + password + '&contact1=' + contact; if(name=='' || email=='' || password=='' || contact=='') { alert("Please fill in all fields"); } else { // Ajax code to submit form. $.ajax({ type: "POST", url: "ajaxsubmit.php", data: dataString, cache: false, success: function(result){ alert(result); } }); } return false; }); });
-
7.데이터가 다중 / 폼 데이터 나 응용 프로그램 /로 전송하는 것을 의미하지 않을 경우 2020 하나 - 라이너 솔루션은 x-www-form-urlencoded를 :
데이터가 다중 / 폼 데이터 나 응용 프로그램 /로 전송하는 것을 의미하지 않을 경우 2020 하나 - 라이너 솔루션은 x-www-form-urlencoded를 :
<form onsubmit='return false'> <!-- ... --> </form>
-
8.jQuery의 포스트 기능을 참조하십시오.
jQuery의 포스트 기능을 참조하십시오.
나는 버튼을 만들 및 OnClickListener를 설정합니다 ($ ( '# 버튼을')에 (, 기능 ( '클릭') {});.), 및 기능에 데이터를 전송합니다.
또한, jQuery를의에서 preventDefault 기능을 참조하십시오!
-
9.원하는 효과는 여기서 설명한 바와 같이이 형태의 버튼 외부 제출 이동시킴으로써 달성 될 수있다 :
원하는 효과는 여기서 설명한 바와 같이이 형태의 버튼 외부 제출 이동시킴으로써 달성 될 수있다 :
양식에 방지 페이지를 다시로드와 리디렉션은 아약스 / JQuery와 제출
이 같이 :
<form id="getPatientsForm"> Enter URL for patient server <br/><br/> <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" /> <input name="patientRootUrl" size="100"></input> <br/><br/> </form> <button onclick="javascript:postGetPatientsForm();">Connect to Server</button>
-
10.이 코드를 사용하면 형태와 피할 리디렉션을 제출할 수 있습니다. 대신 당신은 인자로 성공 함수를 통과하고 당신이 원하는대로 할 수 있습니다.
이 코드를 사용하면 형태와 피할 리디렉션을 제출할 수 있습니다. 대신 당신은 인자로 성공 함수를 통과하고 당신이 원하는대로 할 수 있습니다.
function submitForm(form, successFn){ if (form.getAttribute("id") != '' || form.getAttribute("id") != null){ var id = form.getAttribute("id"); } else { console.log("Form id attribute was not set; the form cannot be serialized"); } $.ajax({ type: form.method, url: form.action, data: $(id).serializeArray(), dataType: "json", success: successFn, //error: errorFn(data) }); }
그리고 바로 수행
var formElement = document.getElementById("yourForm"); submitForm(formElement, function() { console.log("Form submitted"); });
-
11.당신이 다시 끝을 제어 할 경우, Response.Redirect를 대신 response.send 같은 것을 사용합니다.
당신이 다시 끝을 제어 할 경우, Response.Redirect를 대신 response.send 같은 것을 사용합니다.
당신은이에 대한 사용자 정의 HTML 페이지를 만들거나 당신이 이미 가지고 뭔가 리디렉션 할 수 있습니다.
Express.js에서 :
const handler = (req, res) => { const { body } = req handleResponse(body) .then(data => { console.log(data) res.redirect('https://yoursite.com/ok.html') }) .catch(err => { console.log(err) res.redirect('https://yoursite.com/err.html') }) } ... app.post('/endpoint', handler)
from https://stackoverflow.com/questions/25983603/how-to-submit-an-html-form-without-redirection by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] 모바일 사파리 : inputfield에 자바 스크립트 초점 () 메서드는 클릭으로 작동? (0) | 2020.10.27 |
---|---|
[JQUERY] 어떻게 jQuery.ajax와 FormData를 사용하여 파일을 업로드 (0) | 2020.10.27 |
[JQUERY] 수직 스크롤을 기반으로 jQuery로 / 제거 클래스를 추가 하시겠습니까? (0) | 2020.10.27 |
[JQUERY] 어떻게 jQuery를 사용하여있는 DropDownList의 값을 설정할 수 있습니까? (0) | 2020.10.27 |
[JQUERY] JQuery와로드 된 경우 false의 경우,로드 확인 (0) | 2020.10.27 |