0

名前、メール、メッセージ、キャプチャの各フィールドを含むフォームがあります。

フォームを送信してサーバー側でキャプチャを確認できます。すべて問題がない場合は、requestDispatcherを使用してjspを表示する必要があります。キャプチャが正しい場合はすべて正常に機能しますが、正しくない場合は、フォームが表示されているのと同じページにユーザーをリダイレクトして、ユーザーがキャプチャを再入力できるようにします。ただし、このアプローチの主な問題は、フォームがクリアされることです。つまり、ユーザーはすべてを再入力する必要があります。ユーザーがフォームに再入力する必要がないように、どうすればこのことを回避できますか。

そして、これに対する他のより良いアプローチです。

Iv'eはすでにキャプチャを検証するためにajax呼び出しを試みましたが、そのアプローチにはいくつかの問題があります。jqueryajaxコールバック関数でフォームを送信できません

4

2 に答える 2

0

このようなことを行うことができます。いくつかのdivでクリックイベントを呼び出して「送信」と言ってから、ajax呼び出しを呼び出して結果を取得します。結果に応じて、フォームを送信するかどうかを決定できます。

送信はDIVですprintCouponはフォームです

$("#submit").click(function(){

        var response = '';
        $.ajax({ type: "GET",   
                 url: "ajaxprintcoupon",   
                 async: false,
                 success : function(text)
                 {
                     response = text;
                 }
        });

        alert(response);

        if(response == 'Testing'){
            $('#printCoupon').submit();
        }else{
            // no change
        }
    });
于 2012-07-26T19:09:03.227 に答える
0

JS コードでXmlHTTPRequestを使用する必要があります。

回答を取得するためのコールバックを割り当て、必要に応じて処理します。私の場合、出力するコードをサーバーから取得していましたが、すべての入力を含むフォームは以前の状態のままで、html ページの div 'output' のみが変更されました。

これが私のプログラムの短い例です: ページの html

<script type="text/javascript" src="./js/script.js">/script>
<form name="someForm">
<p><b>Enter your text here:</b></p>`

<p><textarea rows="10" cols="45" name="code"></textarea></p>
<input type="button" value="Send it" onclick="sendIt()"/>
</form> </code>
<div id="output"></div>

私の場合、script.js はページの一部のみを更新します

function sendIt() {
    var theCode = document.codeHolderForm.code.value;
    var linkToDiv = document.getElementById("output");
    linkToDiv.innerHTML = 'p> Server response below: p>';

    var request = getXmlHttp();

    request.open("POST", "/", true);
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    request.onreadystatechange = function () {
        if (request.readyState != 4) return;

        if (request.status == 200) {
            linkToDiv.innerHTML += 'p>' + request.responseText + '/p>';
        } else {
            handleError(request.statusText);
        }
    };

    request.send("code=" + theCode);

}

function handleError(message) {
    alert("Error: "+message)
}

function getXmlHttp() {
    var xmlhttp;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
于 2012-07-26T18:58:50.830 に答える