ページをリフレッシュせずにHTMLページとJavaサーブレットとの間でデータを交換

Question

HTMLとJava（そしておそらくJSON）を使用して簡単なログインフォームを作成したいと考えています。ですから、私は以下のid-s：txtUsername、txtPasswd、btnLoginを持ついくつかの入力フィールドを持つログインフォームを持っています。 ボタン（btnLogin）をクリックした後、私はサーブレットにデータを送って、ユーザーpasswdの組み合わせで真偽値だけを取得したいと思います。 このフォームのHTMLコードとサーバー側のコードを書くことはできますが、わかりませんが、ページの更新を行わずにデータを送信および受信する方法はありますか。あなたは、AJAX要求を使用する必要が

<script> 
    function login(){ 
     var user=document.getElementById("txtUsername"); 
     var passwd=document.getElementById("txtPasswd"); 
     //??? 
    } 
</script> 


Username: <input type="text" id="txtUsername"/> <br/> 
Password: <input type="password" id="txtPasswd"/> <br/> 
<input type="button" value="Login" id="btnLogin" onclick="login()"/> 

Answer 1

：

は、ここに私のフロントエンドのコードです。これを行う1つの方法は、開始したようにAjaxリクエスト（XmlHttpRequest）を使用するようにJS関数を呼び出すloginボタン（onclickなど）のワイヤーアップとイベントハンドラです。

これはバニラJavascriptで行うことができますが、jQueryのようなライブラリを使用する方が簡単です。コード（「$」を注意し、jQueryで）次のようになります。

function login() { 
    $.ajax({ 
     type: 'POST', 
     url: url, //Url of login endpoint 
     data: DATA, //Now here you would want to send a payload i.e. your username and password data 
     dataType: 'json', 
     contentType: 'application/.json', 
     success: function(data) { 
        //HERE 'data' would represent your true or false that came back from the server. 
        //You can do stuff here with the response 
       }, 
     error: function(jqXHR, textStatus, errorThrown) { 
        //IF ERROR then this code would be executed.       
       } 
    }); 
} 

希望これはあなたの出発点を与えます！

Answer 2

jquery AJAXを使用する必要があります。ここで

は、公式ドキュメントへのリンクです：http://api.jquery.com/jquery.ajax/

はそれがお役に立てば幸いです。