Ajax通信+JSON

Ajax通信とは?

非同期JavaScript AndXml(非同期javascriptおよびxml)の略.

アドレスを移動する方法、またはページをリフレッシュせずにデータをロードする方法.

Javaスクリプトでデータを交換する方法.

非同期は、1つのウェブサイトをアプリケーションs/wのように見せる.

サーバ応答のデータ形式は次のとおりです.
1. text – String
2. html
3. XML
4. JSON(*)
構文
$.ajax({
url:「アドレス」
type:「送信するデータ型」
data:「送信するデータは、ない場合は省略できます」.
DataType:「受信するデータフォーマット」
success:データを受信して処理する関数(callback関数);
error:実行に失敗したときに実行する関数
});
コールバック関数とは?
非同期なので、応答を待つのではなく、他の操作を行います.
その間、応答があればsuccess関数に処理を渡します.
そのときに実行される関数はcallback関数です.

掲示板リストの読み込み

AJAX通信でデータ交換します.
これまで掲示板の例で各サービスを実行するすべてのJSPが作成されていた場合、
今回は非同期方式なので、1つのjspを使用してすべてのリクエストを実行します.
まずは初期画面basicjspが作成されました.
次にコントローラにマッピングし、初期画面に入ることができます.

[QUERY起動関数]

$(document).ready(()=>{ // => 람다식으로 표현(*)
  		alert("jQuery START");
  	});

jqueryの準備ができました.掲示板のリストを表示します.

	function loadList() {
  		//게시판 리스트를 서버에 요청하기(boardList.do)
		$.ajax({
			url : "/myapp/boardList.do",
			type : "get",
			//data : 넘길게없다.
			dataType : "json",
			success : htmlView,//데이터를 받아서 처리하는 함수(callback함수)
			error : function () {alert("error");}
		});
	}
  ======================요청 수행할 컨트롤러 메서드=================
  	@RequestMapping("/boardList.do")
	public @ResponseBody List<Board> boardList() {
		List<Board> list = mapper.selectAll();
		// list---(jackson)--->JSON
		return list; // ajax()함수쪽으로 데이터를 전달
	}

メソッドタイプの前に@ResponseBodyを貼り付けます.
このように貼るとコントローラはJSPでもリダイレクトでもない
直ちに返事をする.jsonコードで自分で変換して相手に渡す.
そして、JSONにオブジェクトを渡すためには、データマッピングが必要です.
SpringはGsonではなく、JacksonというAPIを使用しています.
ジャックソンって何?
JavaオブジェクトをJSONまたはJSONをJavaオブジェクトに変換するJavaライブラリに使用できます.

		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-databind</artifactId>
		    <version>2.9.8</version>
		</dependency>

pom.xmlに依存項目を追加すればいいです.
そしてデータを渡すと.[{data},{data},{data}]はこのようにデータを伝達する.
次に、受信したデータを出力する関数を作成します.

function htmlView(data) {
		var result = "<table class='table table-bordered table-hover'>";
		result+="<tr>";
		result+="<td>번호</td>";
		result+="<td>제목</td>";
		result+="<td>작성자</td>";
		result+="<td>작성일</td>";
		result+="<td>조회수</td>";
		result+="<td>수정</td>";
		result+="<td>삭제</td>";
		result+="</tr>";

このようにresultはタグを変数に追加します.
$.each(data, (index,vo)=>{
結果+=~~~省略
}

そしてbasicjspを実行すると、データはこのようにインポートされ、表示されます.
タイトルをクリックすると、各文章の内容が表示されます.

result+="<td><a href='javascript:contentView("+vo.idx+")'>"
 +vo.title+"</a></td>";

aタグにhrefのjavascript:関数名を書き込むと、javascriptに移動することを示します.

  	function contentView(idx) {
  		if($("#cv"+idx).css("display")=="none"){
			$("#cv"+idx).css("display","table-row"); // open
		}else{
			$("#cv"+idx).css("display","none"); // close
		}
	}
  ============클릭하면 글의 내용 보이는 부분을 미리 만든다================

result+="<tr id='cv"+vo.idx+"' style='display:none'>";
result+="<td>내용</td>";
result+="<td colspan='6'>";
result+="<textarea rows='6' id='c"+vo.idx+"' class='form-control'>"+vo.content+"</textarea>";
result+="<br>";
result+="<button class='btn btn-success btn-sm' onclick='updateFn("+vo.idx+")'>수정</button>&nbsp";
result+="<button class='btn btn-warning btn-sm' onclick='closeFn("+vo.idx+")'>닫기</button>";
result+="</td>";
result+="</tr>";

番号(idx)値を使用してマウスの右クリック関数を実行します.条件文を入れて、次のresultコードが初期に見えないようにし、押すと見えて消えます.
実行結果