jfinal+hbase+eclipse开发web项目详细步骤02---jfinal工程中加入jquery插件

本小节是在01工程步骤至上进行改进，主要改进内容有：
1、加入jquery插件。
2、利用jquery插件的ajax来做页面与后台的数据交互。
3、利用jquery来动态处理页面数据与页面显示。
注意，在开发之前，我们先要准备好01工程和jquery插件，jquery插件下载，我用的是jquery-3.3.1.min

步骤1：加入jquery插件

在WebContent文件夹下新建文件夹js，并且将下载好的jquery-3.3.1.min.js复制到文件夹中
在这里插入图片描述

步骤2：双击打开index.html文件

在这里插入图片描述

步骤3：引入query插件

在head中间加入

<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

在这里插入图片描述

步骤4：编写ajax做数据交互

<script type="text/javascript">
$(document).ready(function(){
	$.ajax({
		data:{"data1":"11","data2":"22"},    
		url:"/hello/indexData",    
		type:"post",    
		success:function(data){    
			var list=data.infos;
			var tr="";
			$.each(list, function(i, item){
				tr +="<tr><td>"+item.no+"</td>"+"<td>"+item.name+"</td>"+"<td>"+item.cls+"</td>";
			});
			$("table").append(tr);
		}
		
	});

});
</script>

在这里插入图片描述

步骤5：编写table表格

<body  align="center">
这是学生信息页面<br>
<hr>
<table border="1" align="center">
	<thead>
		<tr>
			<td>学号</td>
			<td>姓名</td>
			<td>班级</td>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>
</body>

如图下：
在这里插入图片描述

步骤6：新建Student类，并编写类信息内容

在demo包中，右键新建类
在这里插入图片描述

编写Student.java内容

package com.demo;

public class Student {
	private String no;//学号
	private String name;//姓名
	private String cls;//班级
	public String getNo() {
		return no;
	}
	public void setNo(String no) {
		this.no = no;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getCls() {
		return cls;
	}
	public void setCls(String cls) {
		this.cls = cls;
	}
}

第8步：添加在HelloController类中获取数据indexData方法。

public void indexData() {
		 ArrayList<Student> studnets=new ArrayList<>();
		 Student s1=new Student();
		 s1.setNo("01");
		 s1.setCls("16计本1班");
		 s1.setName("小米");
		 
		 Student s2=new Student();
		 s2.setNo("02");
		 s2.setCls("16计本1班");
		 s2.setName("小花");
		 
		 Student s3=new Student();
		 s3.setNo("01");
		 s3.setCls("16计本2班");
		 s3.setName("旺旺");
		 
		 studnets.add(s1);
		 studnets.add(s2); 
		 studnets.add(s3);
		 
		 setAttr("infos", studnets);
		 renderJson();
	 }

在这里插入图片描述

步骤9：启动服务

打开Start类,右键点击运行
在这里插入图片描述

步骤10：运行查看

打开浏览器，输入：http://localhost:8082/hello
如果显示一下界面，说明成功！！
在这里插入图片描述

jfinal+hbase+eclipse开发web项目详细步骤02---jfinal工程中加入jquery插件

猜你喜欢