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、测试查看结果