form.submit의 응답을 어떻게 캡처합니까?

다음 코드가 있습니다.

<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()이벤트 이후에 나타나는 내용을 가져옵니다 .

당신은 할 수 event.preventDefault()귀하의 제출 버튼의 클릭 핸들러에서 HTML 양식의 기본을 보장하기 위하여 submit(페이지 새로 고침에 대한 어떤 단서 인) 이벤트가 발생하지 않습니다.

또 다른 대안은 hackier 형태의 마크 업을 사용하는 것입니다 : 그것은 사용의 <form>과type="submit" 여기에 원하는 동작의 방법으로 점점 그; 이는 궁극적으로 페이지를 새로 고치는 클릭 이벤트로 이어지기 때문입니다.

여전히 사용하려는 경우 <form>, 당신은 사용자 정의 핸들러를 클릭 쓰고 싶지 않아, 당신은 jQuery의 사용 ajax에 대한 약속 방법 노출에 의해 멀리 당신을위한 전체 문제를 추상화 방법을, success, error, 등

요약하면 다음 중 하나를 수행하여 문제를 해결할 수 있습니다.

• 사용하여 처리 기능의 기본 동작 방지 event.preventDefault()

• 기본 동작이없는 요소 사용 (예 : <form> )

• jQuery 사용 ajax

(저는이 질문이 2008 년의 질문이라는 것을 알아 챘습니다.이 질문이 내 피드에 왜 나타나는지 잘 모르겠습니다. 어쨌든 이것은 분명한 대답 이길 바랍니다)

이 문제에 대한 내 코드입니다.

<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 요청의 출력을 캡처하려는 경우 다음과 같은 간단한 단계를 수행 할 수 있습니다.

1. 프로그래머 도구 상자 열기
2. 콘솔로 이동하여 그 안의 아무 곳이나
3. 나타나는 메뉴에서 "XMXHTTPRequest 로깅 사용"을 클릭합니다.
4. 그렇게하면 AJAX 요청을 할 때마다 "XHR completed loading : http : // ......"로 시작하는 메시지가 콘솔에 나타납니다.
5. 표시되는 링크를 클릭하면 응답의 헤더와 내용을 볼 수있는 "리소스 탭"이 표시됩니다!

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

@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를 사용해야합니다. 양식을 제출하면 일반적으로 브라우저에서 새 페이지를로드합니다.

자바 스크립트 및 AJAX 기술을 사용하여이를 수행 할 수 있습니다. jquery를 살펴보고이 양식에서 plug in . form.submit에 대한 콜백을 등록하려면 두 개의 js 파일 만 포함하면됩니다.

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

인용구

먼저이 사용 ( 'formid'). submit (function (event)) 내에서 $ (document) .ready (function ())을 사용한 다음 ajax 양식 제출 $ .ajax ({,,, ,}); 그것은 매개 변수 u 당신의 요구 사항에 따라 선택할 수 있습니다 다음 호출 afunction success : function (data) {// 내 예제가 div에 응답 html을 넣기를 원하는대로 수행}

우선 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를 저장하기 위해) :

I. 클라이언트 부분 :

Ia 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>

Ib 스크립트 부분 :

$(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은 반환 값을 포함합니다.

행운을 빕니다.