title: Arya25(学习Ajax)
date: 2020-06-15 18:05:13
tags:
学习原因
当然是Ajax太方便了，但是由于我觉得很难，所以也怕，也就是我今天才学的原因。之前用SSM写小Demo很想用ajax的，奈何当时理解起来有点困难，后面下决心一定要学一下，也就是今天。
SSM框架课程扩展之Ajax学习
AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的web应用程序的技术。
使用ajax要先导入jquery的包，而后编写对应处理的controller，返回消息或者字符串或者json格式的数据；接着编写ajax请求：url:controller请求，data：键值对,success：回调函数；最后给ajax绑定事件，点击click或者失去焦点onblur等等。
案例代码1
我觉得学的时候看的案例很简单明了，需要用的时候模仿着写再改改就行：
1
2
3
4
5
6
7
8
9
10Controller层
查询总用户数
@RequestMapping(value = "/findTotalUsers.do",method = RequestMethod.GET)
public @ResponseBody Long findTotalUsers(){
ModelAndView modelAndView = new ModelAndView();
Long sum = personService.findTotalUsers();
System.out.println(sum+"....................................");
modelAndView.addObject("sum",sum);
return sum;
}
1 | Service层 |
Dao层
public Long findTotalUsers() {
String hql = "select count(*) from Person";
return (Long) this.getSessionFactory().getCurrentSession().createQuery(hql).uniqueResult();
}
1 |
|
案例代码2
jsp:1
2
3
4
5
6
7
8
9
10
11
12
13
14<table class="table table-bordered table-hover table-striped" id="tableuserlist">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Fullname</th>
<th>Dept</th>
<th>Job</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
js:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 <script type="text/javascript">
$(function (){
$.ajax({
type:"GET",
url:"/usercontroller/getuserlist",
dataType:"json",
async:false,//是否异步请求
success:function(data){
<!-- //------------遍历对象 .each的使用-------------
//前提必须是对象，一般情况下，后台传过来json字符串，要使用相应的方法将其转化为对象（eval、str.parseJSON()、JSON.parse(str)）。
-->
var obj=eval(data);//将括号内的表达式（expression）转化为对象
var tbody=$('<tbody></tbody>');
//下面使用each进行遍历
$(obj).each(function (index){
var val=obj[index];
var tr=$('<tr></tr>');
tr.append('<td>'+ val.userid + '</td>' + '<td>'+ val.username + '</td>' +'<td>'+ val.userfullname + '</td>' + '<td>'+ val.userdeptid + '</td>'+'<td>'+ val.userjobid + '</td>');
tbody.append(tr);// append() :在被选元素的结尾插入内容
});
$('#tableuserlist tbody').replaceWith(tbody);
}
});
});
</script>
controller:
1 | @RequestMapping(value="/getuserlist",method=RequestMethod.GET) |
service:
1 | public List<ErpUser> GetUserList(){ |
mapper:1
2
3
4
5
6
7 List<ErpUser> selectAllUser();
mapper.xml:
<select id="selectAllUser" resultMap="BaseResultMap" >
select
<include refid="Base_Column_List" />
from erp_user
</select>
至此，完成了ajax 发送url请求，controller拦截后调用service mapper 至mysql查询数据，然后返回json格式数据交由ajax进行页面呈现。
