【JAVAEE】struts2采用jQuery的ajax实现数据的异步更新

介绍

先说下什么是异步刷新，粗略的说就是不刷新整个页面实现部分内容的刷新。由于只是在解决一些问题上遇到到异步刷新，所以这里只是简单介绍个例子，这里推荐http://www.runoob.com/ajax/ajax-database.html去网站看看具体的内容。

案例

1.下载依赖

下载jquery包并导入java项目。我这采用的是3.3.1版本，官网下载地址：https://jquery.com/download/

2.script代码

< script type = "text/javascript"
src = "/LeaveSystem/js/jquery-3.3.1.min.js" > < /script> <!–导入包–> <
	script type = "text/javascript" >
	$(".btn").bind("click", function() { //点击事件
		$.ajax({
			type: "post",
			< !–提交到服务器的方式post或者get– >
			url: "/", //提交到action的地址
			data: { //传输时候附带的参数
				"dbteachereclass.eclass": $(this).attr("data-eclass"),
				"dbteachereclass.name": $(this).attr("data-name")
			},
			dataType: "json",
			//预期服务器返回的数据类型类型有：xml、html、script、json、jsonp、text，这里我采用json的返回形式
			success: function(data) { //获取数据承购执行的代码
				var studata = eval("(" + data + ")"); //将数据转化成json
				var s = ""; //需要生成的html代码
				var head = "<tr><td height=’20px’ align=’center’>工号</td>" +
					"<td height=’20px’ align=’center’>姓名</td>" +
					"<td height=’20px’ align=’center’>操作</td></tr>";
				//拼接html代码
				$("#renming").append(head); //将拼接的代码放入ID为renming的标签里面
				for (var i = 0; i < studata.length; i++) { //循环拼接接受到的代码
					s = "<tr><td align=’center’>" + studata[i].teacher + "</td><td align=’center’>" +
						studata[i].name +
						"</td><td align=’center’><input type=’button’ class=’TeacherEclassAppointment’ value=’任命’ data-teacher=\"" +
						studata[i].teacher + "\" data-name1=\"" + studata[i].name + "\" ></td></tr>";
					$("#renming").append(s);
				}
			},
			error: function() { //接受数据失败执行的代码
				alert("系统异常，请稍后重试！");
			}
		});
	});

3.html

<input type=’button’ class="btn" value=’任命’ data-eclass="${teacher.eclass}" data-name="${teacher.name}" >

4.java

java action的代码，这里只展示处理这个action的一个方法。

public String CollegeTeacher() throws Exception{
//查询班级转化为josn
    String forward=null;
    ActionContext.getContext().getSession().put("dbteachereclass",dbteachereclass);
    ArrayList<DbTeacher> teacher = new ArrayList<DbTeacher>();
    TeacherDao teacherdao = new TeacherDao();
    if(dbteacher.getCollege()!=0) {
        teacher = teacherdao.findClass(dbteacher.getCollege());
        if(teacher.size()!=0) {
            JSONArray json = JSONArray.fromObject(teacher); //看这里就好，其他的都是我系统要自带的代码，这里就是在dao层查询数据库获取到对象teacher,把teacher对象转化成json对象
            result = json.toString(); //将json对象输出给result,通过result传输给jsp
            forward="success";
        }else {
            forward="error";
        }
    }else {
        forward="error";
    }
    return forward;
}

5.配置xml文件

<struts>
<constant name="struts.i18n.encoding" value="UTF-8"></constant> //传输编码
<package name="空间名字" namespace="空间路径" extends="struts-default,json-default">
<action name="名称" class="方法路径" method="方法名" >
<result name="success" type="json">
<param name="root">result</param>
</result>
<result name="error"></result>
</action>
</package>
</struts>