介绍

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

案例

1.下载依赖

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

2.script代码

javascript
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
< 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

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

4.java

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

java
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
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文件

xml
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
<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>