1.案例需求

使用SSMAjax实现广告系统包括登录、查询所有、搜索、新增、删除、修改等功能具体实现的效果图如下

2.编程思路

使用jQuery的$.ajax方法在用户点击提交按钮时阻止表单的默认提交行为向服务器发送POST请求。

请求的URL设置为login.action这是Spring

MVC中RequestMapping注解映射的URL。

通过data属性将表单中的数据用户名和密码以JSON格式发送给服务器。

在success回调函数中处理服务器返回的响应数据。

后端处理

使用RequestMapping(“login.action”)注解定义处理登录请求的URL。

login方法接收前端发送的用户名advTitle、密码以及用于响应的ResponseVO对象和HttpSession对象。

调用服务层advService的login方法验证用户名和密码。

根据验证结果设置ResponseVO对象的code和message属性并将验证成功的用户信息存入HttpSession中以便后续使用。

将ResponseVO对象作为方法的返回值Spring

前端处理

页面加载时通过AJAX请求selectCategoryName接口获取所有广告分类的名称并使用JavaScript动态生成下拉列表的选项。

这样用户就可以在下拉列表中选择广告分类作为查询条件之一。

页面加载后可能还需要执行一次初始查询以展示默认的广告信息列表。

这可以通过另一个AJAX请求queryInfos.action不带任何查询参数或使用默认参数来实现。

查询结果通过addRow函数动态添加到表格中。

提供一个查询按钮#btn或表单提交事件用于在用户输入查询条件如广告标题、分类ID后触发查询操作。

点击查询按钮时阻止表单的默认提交行为并通过AJAX请求queryInfos.action接口将查询条件advTitle和categoryId作为请求参数发送。

接收响应数据后根据状态码code判断查询是否成功并更新页面内容如果查询成功则清空表格并重新添加查询结果如果查询失败则显示错误信息。

后端处理

在后端通过RequestMapping注解定义了两个查询接口queryAdvInfos用于根据广告标题advTitle和分类IDcategoryId查询广告信息queryAdvCategoryNames用于查询所有广告分类的名称。

queryAdvInfos方法接收两个参数advTitle和categoryId并使用这些参数构建一个查询条件对象AdvVo然后调用服务层advService的queryAdvsInfo方法执行查询最后根据查询结果构建响应数据并返回。

queryAdvCategoryNames方法直接调用服务层advCategoryService的queryAllCategoryNames方法查询所有广告分类的名称并将结果构建为响应数据返回。

对于查询结果后端使用MapString,

Object来构建响应数据其中可能包含状态码code、消息信息INFO或错误信息、以及查询结果列表如advInfo_List或advCategoryName_List。

前端分析

通过AJAX请求selectCategoryName接口获取广告分类列表并动态添加到分类选择器中。

设置默认过期时间页面加载时计算下个月的今天作为默认过期时间并设置到相应的输入框中。

使用event.preventDefault()阻止表单的默认提交行为改为通过AJAX异步提交。

创建一个FormData对象将表单字段和文件数据添加到其中。

通过AJAX将FormData对象发送到add.action接口。

设置processData和contentType为false因为FormData对象会自动处理这些设置。

根据后端返回的数据显示操作结果如果添加成功则跳转到广告列表页面。

后端处理

使用RequestMapping(“/add.action”)注解定义了一个处理广告添加的HTTP

POST请求接口。

通过ResponseBody注解表明该接口返回的数据会直接写入HTTP响应体body中而不是解析为跳转路径或视图名称。

接收多个参数包括HttpServletRequest、MultipartFile用于文件上传、广告标题、分类ID、过期时间、广告内容、备注和密码。

特别注意MultipartFile用于处理文件上传其他参数则是普通的表单数据。

对过期时间expiredTime进行非空和格式校验确保用户输入了有效的日期字符串。

创建一个临时文件来存储上传的文件避免直接处理原始输入流可能带来的问题。

将上传的文件内容复制到临时文件中并从临时文件复制到服务器的两个不同位置可能用于备份或不同的访问路径。

最后删除临时文件以释放资源。

将接收到的数据封装到AdvInfo对象中。

调用advService.add(advInfo)方法将广告信息保存到数据库或持久化存储中。

根据操作结果返回相应的状态码和信息。

前端处理

获取广告ID并将其存储在localStorage中发起一个AJAX

POST请求到

URL携带要删除的广告IDadvId。

在AJAX请求成功后清空表格体#myTbody和消息区域#msg并显示服务器返回的消息。

如果服务器返回的

code

advService.deleteAdvById(advId)

responseVO

/queryAdvById.action传递广告ID作为参数。

在AJAX请求的

success

回调中将返回的广告信息填充到表单的相应字段中。

对于下拉选择框需要遍历选项并设置选中的值。

监听修改按钮的点击事件阻止表单的默认提交行为。

使用

FormData

RequestMapping(“/update.action”)

HttpServletRequest、MultipartFile用于文件上传、以及其他表单字段。

从请求中提取广告ID、标题、类别ID、过期时间、内容、备注、密码和文件等参数。

对过期时间进行解析并处理可能的

ParseException

NullPointerException。

将上传的文件先保存到临时文件中。

定义两个目标路径并将文件从临时文件复制到这两个位置。

更新广告对象中的图片路径。

删除临时文件。

创建一个

AdvInfo

来更新数据库中的广告信息。

根据服务层方法的返回值构造一个包含状态码和消息的

Map

3.案例源码(这里只给出新增部分的Handler和ajax部分需要详情的可以私信我)

Handler类

advCategoryService;RequestMapping(/add.action)ResponseBodypublic

MapString,Object

AdvInfo();advInfo.setAdvTitle(advTitle);advInfo.setCategoryId(categoryId);advInfo.setAdvContent(advContent);advInfo.setRemark(remark);advInfo.setPassword(password);SimpleDateFormat

dateFormat

SimpleDateFormat(yyyy-MM-dd);Date

time

IllegalArgumentException(expiredTime

cannot

dateFormat.parse(expiredTime);}

catch

RuntimeException(e);}advInfo.setExpiredTime(time);//

realPath

request.getSession().getServletContext().getRealPath();//

创建临时文件File

{uploadFile.transferTo(tempFile);}

catch

uploadFile.getOriginalFilename();advInfo.setImg(images\\

originalFilename);//

{map.put(code,200);map.put(INFO,

添加广告成功);}

{map.put(code,100);map.put(INFO,

添加广告失败);}return

document.getElementById(categoryId);$.ajax({url:

post,success:

data.advCategoryName_List.length;

{var

data.advCategoryName_List[i];objselect.add(new

Option(advCategoryName.categoryName,

advCategoryName.categoryId));}},dataType:json});});$(function

{//

Date();today.setMonth(today.getMonth()

1);

设置输入框的值$(#expiredTime).val(expiryDate);$(#btn).click(function

(event)

{event.preventDefault();//阻止表单的默认提交行为var

formdata

FormData();formdata.append(advTitle,$(#advTitle).val());formdata.append(categoryId,$(#categoryId).val());formdata.append(expiredTime,$(#expiredTime).val());formdata.append(advContent,$(#advContent).val());formdata.append(remark,$(#remark).val());formdata.append(password,$(#password).val());formdata.append(uploadFile,document.getElementById(file).files[0]);$.ajax({url:

add.action,type:

post,data:formdata,processData:false,//发送二进制大数据contentType:false,success:

function

http://localhost:8080/Ajax_advSystem/adsList.html;}},dataType:

json});});});4.小结

SSM是指Spring、SpringMVC和MyBatis这三个框架的集合它们通常一起使用来构建Java

Web应用程序。

Ajax是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。

SSM框架的重点知识

理解如何通过Spring容器管理对象的生命周期和依赖关系。

面向切面编程AOP

熟悉Spring的数据访问策略包括JdbcTemplate和事务管理。

SpringMVC框架

理解模型Model、视图View和控制器Controller的概念和它们在Spring

掌握如何通过Controller和RequestMapping注解来处理HTTP请求。

数据绑定和验证

MyBatis框架

理解MyBatis如何将SQL语句映射到Java方法上。

配置和映射文件

学会使用MyBatis的动态SQL功能来编写灵活的SQL语句。

插件开发

了解如何通过MyBatis插件来扩展或增强MyBatis的功能。

XMLHttpRequest对象创建和使用XMLHttpRequest对象来发送异步请求。

异步请求理解Ajax的工作原理包括如何发送请求、处理响应以及更新网页的某部分。

数据格式熟悉JSON和XML等数据格式并掌握如何在Ajax中发送和接收这些格式的数据。

事件处理掌握如何在JavaScript中处理事件如按钮点击事件触发Ajax请求。