JSF中按鈕點選ajax調用rest接口傳參到背景，JPA查詢資料庫傳回JSON對象前台解析（标簽，jquery，rest，JPA，JSON）

1、js/jquery-1.11.3.js

2、JSF标簽引入

<h:outputScript name="js/jquery-1.11.3.js"> </h:outputScript>

<h:head>
	<title>CDI Sample</title>
	<h:outputScript name="js/jquery-1.11.3.js"> </h:outputScript>
	<script type="text/javascript">
		$(function () {
			$('#restBtn').click(function () {
				alert("---");
				console.log("=-====");
			});
		});
	</script>
</h:head>
           

3、JSF标簽裡不可以自定義屬性 隻能用HTML

自定義标簽屬性btnID，用于傳值。

<button id="restBtn" btnID="123">rest</button>
           

4、JSF頁面 ajax調用rest接口

<script type="text/javascript">
		$(function () {
			$('#restBtn').click(function () {
				var btnID = $(this).attr('btnID');
				console.log("btnID:"+btnID)
				$.ajax({
					type : 'POST',
					url  : "#{request.getContextPath()}/rest/MyService/list/"+btnID,
					success : function( data ){
						console.log("data:"+data);
					}
				});
				
			});
		});
	</script>
           

5、rest接口

特别注意 type為POST 

@Path("/MyService")
public class MyService {
	
	@Inject
	EntityManager em;
	
	@POST
	@Path("/list/{btnID}")
	@Produces(MediaType.APPLICATION_JSON)
	public List<Member> list(@PathParam("btnID") String btnID){
		
		System.out.println("btnID:"+btnID);
		
		CriteriaBuilder criteriaBuilder  = em.getCriteriaBuilder();
		CriteriaQuery<Member> query = criteriaBuilder.createQuery(Member.class);	//createQuery的參數是Query傳回值類型
		Root<Member> member = query.from(Member.class);								//參數是對應于order表的實體類，query.from類似于sql中的from語句，該方法的執行等價于sql中的from Member。
		
		//預設查詢全部
		query.select(member);	//query.select(root)則等價于select *
		
		//條件查詢
//		Predicate condition = criteriaBuilder.equal(member.get("name"), "星期五");
//		query.where(condition);
		
		TypedQuery<Member> tq = em.createQuery(query);
		
		List<Member> list = tq.getResultList();
		
		//解析JSON對象
		for (int i = 0; i < list.size(); i++) {
			System.out.println(list.get(i).getName());
		}
		for(Member mem : list) {
			System.out.println("mem.email:"+mem.getEmail());
		}
		return list;
	}
	
	@GET
	@Path("/list")
	@Produces(MediaType.APPLICATION_JSON)
	public List<Member> list(){
		
		CriteriaBuilder cb = em.getCriteriaBuilder();
		CriteriaQuery<Member> cq = cb.createQuery(Member.class);
		Root<Member> member = cq.from(Member.class);
		Predicate condition = cb.equal(member.get("name"), "星期五");
		cq.where(condition);
		TypedQuery<Member> tq = em.createQuery(cq);
		
		List<Member> list = tq.getResultList();
		return list;
	}
}
           

6、修改之後的html頁面：

<h:head>
	<title>CDI Sample</title>
	<h:outputScript name="js/jquery-1.11.3.js">
	</h:outputScript>
	<script type="text/javascript">
		$(function () {
			$('#restBtn').click(function () {
				var btnID = $(this).attr('btnID');
				console.log("btnID:"+btnID)
				$.ajax({
					type : 'POST',
					url  : "#{request.getContextPath()}/rest/MyService/list/"+btnID,
					success : function( data ){
						console.log("data:"+data);

						//data直接是對象，這裡不用轉換直接操作對象就OK。 但是一般傳回的是字元串，這樣可以在前台清晰看到資料結構，對其操作（字元串轉成對象，操作對象）。
						//為了看到傳回的資料結構，将json對象轉成json字元串
						var json = JSON.stringify(data);
						console.log(json)
						
						//JSON.parse 是字元串轉對象
						
						//直接操作json對象數組
						for(var p in data){
							console.log(data[p].name);
						}
						for(var i=0; data.length>i; i++){
							console.log(data[i].email);
						}
					}
				});
			});
		});
	</script>
</h:head>
           

JSF中周遊JSON數組對象：

竟然不能這麼用，報錯：

Element type "json.length" must be followed by either attribute specifications, ">" or "/>".

第一種方法改成以下，可以：

第二種最常用解決辦法：

• JSON.parse(string) ：接受一個 JSON 字元串并将其轉換成一個 JavaScript 對象。
• JSON.stringify(obj) ：接受一個 JavaScript 對象并将其轉換為一個 JSON 字元串。

rest接口傳回的資料格式是字元串也可以是對象，對象如果要在前端看到資料結構，将json對象轉成json字元串

var json = JSON.stringify(data);

一般直接傳回json對象，在前端直接周遊操作就可以。

7、浏覽器位址欄直接輸入url

預設走的是GET請求：

GET是隻能擷取資訊   POST可以擷取 也可以送出

GET也能送出  

不過好像是因為長度有限制

是以都用POST送出資料

差別：https://bjlf1105.iteye.com/blog/855258

8、測試檢視結果