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メソッドにコールバック関数を登録できますか？

プレーンなjavascriptを使用してこれを簡単に行うことはできません。フォームを投稿すると、フォーム入力がサーバーに送信され、ページが更新されます-データはサーバー側で処理されます。つまり、submit()関数は実際には何も返さず、フォームデータをサーバーに送信するだけです。

（ページを更新せずに）JavaScriptで応答を取得したい場合は、AJAXを使用する必要があります。AJAXの使用について話し始めるときは、ライブラリを使用する必要があります。jQueryは群を抜いて最も人気があり、私の個人的なお気に入りです。Formと呼ばれるjQueryの優れたプラグインがあり、それはまさにあなたが望むように聞こえるものを実行します。

jQueryとそのプラグインの使用方法は次のとおりです。

$('#myForm')
    .ajaxForm({
        url : 'myscript.php', // or whatever
        dataType : 'json',
        success : function (response) {
            alert("The server says: " + response);
        }
    })
;

Ajaxの代替手段は<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は、非同期ネットワーク呼び出し（以前は、XMLHttpRequestまたはjQuery が必要でした）を簡素化する標準APIです$.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の例もあります。

submit（）が何をするのかを理解しているのかわかりません...

あなたが行う場合はform1.submit();、フォームの情報をウェブサーバに送信されます。

WebServerは、想定されていることをすべて実行し、まったく新しいWebページをクライアントに返します（通常は、変更された同じページ）。

したがって、form.submit（）アクションの戻りを「キャッチ」する方法はありません。

コールバックはありません。リンクをたどるようなものです。

サーバーの応答をキャプチャする場合は、AJAXを使用するか、それをiframeに投稿して、iframeのonload()イベントの後に表示されるものを取得します。

あなたはできるevent.preventDefault()あなたの送信ボタンのクリックハンドラでHTMLフォームのデフォルトことを確実にするsubmit（ページ爽やかにどのようなリードである）イベントが発生しません。

もう1つの方法は、ハッカーフォームマークアップを使用することです。これは、の使用で<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. Programmersツールボックスを開く
2. コンソールに移動し、その中のどこにでも
3. 表示されるメニューで、[XMXHTTPRequestログを有効にする]をクリックします。
4. これを行うたびに、AJAXリクエストを行うたびに、「XHR finished 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を使用する必要があります。通常、フォームを送信すると、ブラウザに新しいページが読み込まれます。

JavaScriptとAJAXテクノロジーを使用してそれを行うことができます。jqueryとこのフォームプラグインをご覧ください。form.submitのコールバックを登録するには、2つの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）{//例に応答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応答を返すことができます。また、サーバー上で直接データを検証/サニタイズすることもできます。これは、クライアントでこれを行うよりも安全（かつさらに簡単）であるため、これは良い方法です。

たとえば、単純な登録のためにユーザーデータを使用してサーバーに（saveprofilechanges.phpに）htmlフォームを投稿する必要がある場合：

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には戻り値が含まれます。

幸運を。