Form submit 후 처리 - Form submit hu cheoli

다음 코드가 있습니다.

Show
    <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); } }) ;


    답변

    Ajax 대안은 invisible <iframe>을 양식의 대상으로 설정하고 <iframe>해당 onload핸들러 에서 해당 내용을 읽는 것 입니다. 하지만 Ajax가 있는데 왜 귀찮게할까요?

    참고 : 일부 답변에서는 Ajax 없이는이를 달성 할 수 없다고 주장하므로이 대안을 언급하고 싶었습니다 .


    답변

    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‘기본 콘텐츠 유형은 우리가 위의 코드에서 보내는 것과 일치하는 “응용 프로그램 / x-www-form-urlencoded를”입니다이야. “다른 물건”을 보내거나 어떻게 든 수정하고 싶다면 여기 에서 핵심적인 세부 사항을 참조하십시오.


    답변

    나는 이런 식으로하고 있고 그 일을하고있다.

    $('#form').submit(function(){ $.ajax({ url: $('#form').attr('action'), type: 'POST', data : $('#form').serialize(), success: function(){ console.log('form submitted.'); } }); return false; });


    답변

    미래의 인터넷 검색 자 :

    새 브라우저 (2018 년 기준 : Chrome, Firefox, Safari, Opera, Edge 및 대부분의 모바일 브라우저 (IE는 제외))의 경우 fetch비동기 네트워크 호출을 단순화하는 표준 API입니다 (예전에 필요했던 XMLHttpRequestjQuery 또는 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”트릭이 더 이상 사용되지 않는다고 언급합니다. 또한 ‘submit’이벤트에 대한 form.addEventListener 예제도 있습니다.


    답변

    submit ()이 무엇을하는지 이해하지 못합니다.

    당신이 할 때 form1.submit(); 때 양식 정보가 웹 서버로 전송됩니다.

    WebServer는 예상되는 모든 작업을 수행하고 클라이언트에게 새로운 웹 페이지를 반환합니다 (일반적으로 변경된 내용이있는 동일한 페이지).

    따라서 form.submit () 액션의 반환을 “잡을”방법이 없습니다.


    답변

    콜백이 없습니다. 링크를 따라가는 것과 같습니다.

    서버 응답을 캡처하려면 AJAX를 사용하거나 Iframe에 게시하고 iframe onload()이벤트 이후에 나타나는 내용을 가져옵니다 .