话不多说，步入正题。
需求分析：
一个简单的用户管理系统，输入用户信息，点击添加则添加，点击删除则删除，并把结果实时更新至当前页面。效果图如下：
实现步骤：
- 搭建spring mvc环境
- 编写jsp页面
- 实现控制器
- 完成ajax的回调函数
搭建spring mvc环境
1.创建一个maven webapp项目。
2.导入响应依赖项，这里需要servlet，springMVC，fastjson三个依赖项。
3.配置web.xml。
- 将web.xml的版本改为3.1
- 添加中央控制器
- 添加字符编码过滤器。如果使用ajax技术，从后台向前台发送数据，需要将字符编码强制设为utf-8
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<!--过滤器-->
<!--字符编码过滤器-->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<!--设置字符编码-->
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
<!--强制设置字符编码，如果在request中已经设置了字符编码，可以用这个强制改一下-->
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!--servlet-->
<!--注册中央控制器-->
<servlet>
<servlet-name>springMVC</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springMVC</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
4.配置springmvc.xml。
编写jsp
jsp页面如图，就很简单。三个input输入框，两个按钮，一个用于显示数据的div。
<body>
姓名：<input type="text" id="name" name="name"><br>
年龄：<input type="text" id="age" name="age"><br>
生日：<input type="data" id="birthday" name="birthday"><br>
<button id="addUser">添加</button>
<button id="deletUser">删除</button>
<br>
<div id="message"></div><br>
*********************************************************************<br>
*********************************************************************<br>
*********************************************************************<br>
<div id="userListContent">
</div>
</body>
实现控制器
思路：为了简单起见，利用ArrayList模拟数据库，把用户数据存放到List中，并把List存放到ServletContext中，这样，在整个Web应用中都能取到数据。
对于ajax请求，控制器方法可以返回void。
@Controller
public class UserController{
/**
* 添加用户
* @param req
* @param resp
* @param user
* @throws IOException
*/
@RequestMapping("/user/adduser.do")
public void ajaxAddUser(HttpServletRequest req , HttpServletResponse resp, User user) throws IOException {
ServletContext sc = req.getServletContext();
List<User> users = null;
users = (List<User>) sc.getAttribute("users");
if(users == null){
users = new ArrayList<>();
}
users.add(user);
sc.setAttribute("users",users);
String usersStr = JSON.toJSONString(users);
for(User u : users){
System.out.println(JSON.toJSONString(u));
}
System.out.println("JSON:");
System.out.println(usersStr);
System.out.println("*******************************");
resp.getWriter().write(usersStr);
}
/**
*
* @param req
* @param resp
* @param user
* @throws IOException
*/
@RequestMapping("/user/deleteuser.do")
public void deleteUser(HttpServletRequest req ,HttpServletResponse resp ,User user) throws IOException {
//获取Context
ServletContext sc = req.getServletContext();
List<User> users = new ArrayList<>();
//获取用户信息
users = (List<User>) sc.getAttribute("users");
if(users==null){
//向前端返回状态码0，说明第一次使用，应用还没用用户信息呢。
resp.getWriter().write("0");
return;
}
//删除用户
if(users.contains(user)){
users.remove(user);
resp.getWriter().write(JSON.toJSONString(users));
}else {
//向前端返回状态码1，要删除的用户不存在。
resp.getWriter().write("1");
}
}
}
完成JS以及ajax回调函数
利用jQuery完成ajax和js的相关代码。
这里需要引入jQuery的代码。（就是一个js文件，在要用到js的jsp中需要引入该js文件）
1.首先，为添加按钮绑定点击事件，向后端发送ajax请求：
<script>
$(function(){
$("#addUser").click(function(){
let name = $("#name").val();
let age = $("#age").val();
let birthday = $("#birthday").val();
$.ajax({
url: "${pageContext.getRequest().contextPath}/user/adduser.do",
method: "post",
data: {
name: name,
age: age,
birthday: birthday
},
dataType: "json",
success: function (result) {
/* 拼接html内容*/
let userHtml="<table border='1'><tr><th>序号</th><th>姓名</th><th>年龄</th><td>生日</td></tr>";
$.each(result,function (index,element) {
userHtml+="<tr class='user-item'><td>"+ (index+1) +"</td><td>" + element["name"]+"</td><td>" + element["age"]+"</td><td>" + element["birthday"] +"</td></tr>";
})
userHtml += "</table>"
$("#userListContent").html(userHtml);
},
fail:function () {
alert("ajax出错！！");
}
})
})
})
</script>
2.在删除时，需要有个功能，就是当鼠标移入某一用户项时，该项的背景颜色要变深，当鼠标点击该项时，该项的信息会匹配到输入框。这里的代码是这样的：
由于用户项是动态添加的，因此要进行动态事件绑定。
即找到父类的jQuery对象，调用其on方法，对其子类进行绑定事件。
$("#father").on("mouseover",".list-item",function(){
//方法体
})
<script>
/*选择元素*/
// 鼠标移入
$("#userListContent").on("mouseover",".user-item",function () {
$(this).css("background-color","blue");
})
//鼠标移出
$("#userListContent").on("mouseout",".user-item",function () {
$(this).css("background-color","");
})
</script>
3.为删除按钮绑定删除事件
这里要注意前端返回的状态码，对不同的状态码进行不同的操作。
/*绑定删除事件*/
$("#deletUser").click(function () {
let name = $("#name").val();
let age = $("#age").val();
let birthday = $("#birthday").val();
if(name == "" && age==""){
alert("您未曾选中用户！！")
}else {
$.ajax({
url:"${pageContext.getRequest().contextPath}/user/deleteuser.do",
type:"post",
data: {
name:name,
age:age,
birthday:birthday
},
dataType: "json",
success:function (result) {
console.log(result);
if(result==0){
alert("首次使用，后台无数据");
}else if(result=="1"){
alert("该用户不存在");
}else {
/* 拼接html内容*/
let userHtml="<table border='1'><tr><th>序号</th><th>姓名</th><th>年龄</th><td>生日</td></tr>";
$.each(result,function (index,element) {
userHtml+="<tr class='user-item'><td>"+ (index+1) +"</td><td>" + element["name"]+"</td><td>" + element["age"]+"</td><td>" + element["birthday"] +"</td></tr>";
})
userHtml += "</table>"
$("#userListContent").html(userHtml);
}
},
fail:function () {
alert("其他错误")
}
})
}
})
到这里，程序基本完成。
总结：
- ajax返回中文时，一定要在为字符编码过滤器配置强制字符编码。
- 在前端中，为动态添加的元素绑定事件时，一定要通过父类为子类绑定事件。即利用jQuery找到父元素，通过on方法，为子类绑定事件。
- 前端中，如果想找到对当前事件绑者，可以利用this关键字，jQuery中要写成$(this)的形式。
5443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
