BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. AJAX関連

Spring MVC + ajax によるメッセージの検証

2022-01-18 05:52:36

この記事は、Spring MVCと連携したajaxの使い方の入門編です。まず、Ajaxとは何かを理解しましょう。

AJAXは新しいプログラミング言語ではなく、既存の標準を利用した新しい方法です。ajaxには、サーバーとデータを交換し、ページ全体を再読み込みせずにページの一部を更新できるという大きな利点があります。だから、ajaxはユーザーエクスペリエンスを向上させるためにとても重要なのです

XMLHttpRequestは、AJAXの基礎となるものです。

主に2つの方法があります。 

var xmlhttp=new XMLHttpRequest();
xmlhttp.open(method,url,async)
xmlhttp.send();

 　　openメソッド内のパラメータは、methodがリクエストの種類（GET/POST）、urlがリクエストするリソースの場所、asyncが非同期リクエストを開始するかどうかを表し、この値は一般にtrueで埋められます。

　　sendメソッドはもちろん、リクエストを開始するためのアクションです。

　　ここで注意。HTML フォームのようなデータを POST する必要がある場合は、 setRequestHeader() を使用して HTTP ヘッダを追加します。そして send() メソッドで送信するデータを指定します。 

xmlhttp.open("POST","url",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //this one is very important and useful
xmlhttp.send("fname=Henry&lname=Ford");

　　上記のコードの2行目は、送信するデータの種類を指定し、実際には、我々は一般的に一般的に送信値の型を指定するために使用するJSON型、つまり、"アプリケーション/ json "は、なぜ一般的に使用されるJSON型ですか？我々は複数の値を送信する場合、パラメータを整理する場合は、それについて考える、どのように面倒なことになり、サーバー側は、データを取得するだけでなく、我々は、時間の非常に無駄、そうJSONの使用は、あなたが最初にJSON形式にデータを書き込むことができますし、バックエンドに渡されると、バックエンドが自動的になりますバックエンドが自動的にパースして非常に便利です、該当POJOにデータを埋めます。

しかし、これを行うには、以下のような設定が必要です。

(1) content-typeを "application/json "に設定し、サーバーにJSONを渡すことを指示します。

(2) JSON.stringifyを使って、データをJSON文字列に変換してから送信する。

(3) サーバー側のControllerは、メソッドのパラメーターの前に@requestBodyを使用する必要があります。これは、サーバー側が適切なパーサーを呼び出してリクエストを解析するようにするためです。

　　ここで、リクエストは完成です リクエストを見てから、レスポンスを見てみましょう。レスポンスを受け付けるajax関数は、以下の通りです。 

xmlhttp.onreadystatechange=function() //automatic call
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
   xmlDoc=xmlhttp.responseXML; //get value
  }
 }

　　Ajaxは自動的に onreadystatechange メソッドを使用して、responseXMLを介して戻り値を取得し、我々は問題が発生します：春MVCでは、戻り値はModelAndViewに書き込まれ、その後、ビューを見つけ、ビューにデータをレンダリングし、我々が望む効果を得ることができない、つまり、ビューを指定せずにデータを返す、我々は@responseBodyを使用しなければなりませんので、。

 　　requestBodyを宣言した後、戻り値が文字列の場合は、文字列をそのままクライアントに書き出し、オブジェクトの場合は、オブジェクトをJSON文字列に変換してクライアントに書き出します。ここで注意しなければならないのは、戻り値のオブジェクトが、utf-8エンコーディングに対応しているかどうかです。あなたが文字列を返す場合は、デフォルトのiso8859-1エンコーディングは、ページが文字化けして表示されることがあります。だから、アノテーションでは、手動でエンコード形式を変更することができます、例えば、@RequestMapping (value="/cat/query",provides="text/html;charset=utf-8"), the 最初はリクエストのパス、次にエンコーディングの形式を指定します。クライアント側では、JSON文字列を取得した後、JSON.parse()を使用してレスポンスをjsonオブジェクトに変換すると便利です。

デモの一例です。

 形は以下の通りです。 

<form role="form" action="userController/insert.do">
  <div class="form-group">
    <label for="exampleInputEmail1">username</label><input name="username" type="text" class=" ;form-control" id="exampleInputEmail1"
                             onblur="check(this)"/>
    <h5 style="color:red" id = "usernameInfo"></h4>
  </div>

  <div class="form-group">
    <label for="exampleInputPassword1">password</label><input name="password" type="password" class ="form-control" id="exampleInputPassword1"
                              onblur="check(this)"/>
    <h5 style="color:red" id="passInfo"></h4>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Confirm password</label><input name="repassword" type="password" class="form-control" id="exampleInputPassword2"
                               onblur="check(this)"/>
    <h5 style="color:red" id="repassInfo"></label>
  </div>
  <button type="submit" class="btn btn-success btn-lg btn-block">submit</button>
</form>

 フォーカスを失うonblurトリガーを介してチェックをトリガーするフォームのためのjsコード check() 

var check = function(info){
  if (info.name=="username"){
    var username = document.getElementById("exampleInputEmail1").value.trim();
    if (username=="") {
      document.getElementById("usernameInfo").innerHTML = "Username cannot be empty";
    }else{
      loadXMLDoc(); // perform Ajax check
    }
///// split line //////////////////////////////// split line ///////////////////////////////////////// split line
  }else if (info.name=="password"){
      var pass=document.getElementById("exampleInputPassword1").value.trim();
      if (pass==""){
        document.getElementById("passInfo").innerHTML="Password cannot be empty";
      }else{
        document.getElementById("passInfo").innerHTML="";
      }
  }else{
    var value1=document.getElementById("exampleInputPassword2").value;
    var value2=document.getElementById("exampleInputPassword1").value;
    if (value1!=value2){
      document.getElementById("repassInfo").innerHTML="Inconsistent password";
    }else{
      document.getElementById("repassInfo").innerHTML="";
    }
  }
}

上のコードはほとんど同じなので、分割行のものだけ見てください。分割線の上のものは、まずローカルJSでユーザー入力が空かどうかを検出し、空でない場合はAjaxコードを実行してアカウントが占有されているかどうかをチェックしており、そのAjaxコードは以下の通りです。 

{{コード

最後に、Controllerのコードを見てみましょう。 

var loadXMLDoc=function() {
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      var text=xmlhttp.responseText;
      document.getElementById("usernameInfo").innerHTML=text; //set the feedback message
    }
  }
  var name = document.getElementById("exampleInputEmail1").value; //get user input
  xmlhttp.open("GET","userController/checkInfo.do?username="+name,true); //construct the request
  xmlhttp.send(); /}

結果が表示されます。

パスワードが空でないことを知らせるためにjsを使用します。

画像

アカウントが重複しているかどうかはajaxで、パスワードが前後で同じかどうかはJSで検出する

概要

以上、Spring MVC + ajaxによる情報検証方法を少し紹介しましたが、お役に立てれば幸いです。もし何か質問があれば、私にメッセージをください。BinaryDevelopのウェブサイトを応援してくださる皆様に感謝いたします。
この記事がお役に立つと思われる方は、ご自由に転載してください！出典を明記してください！ありがとうございました。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します