當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

SSM + Ajax

發(fā)布時間：2023/12/20 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 SSM + Ajax 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.創(chuàng)建數(shù)據(jù)庫

2.創(chuàng)建工程，目錄，導(dǎo)入jquery類庫，并導(dǎo)入pom依賴

<properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.source>1.8</maven.compiler.source><maven.compiler.target>1.8</maven.compiler.target><spring-version>4.3.7.RELEASE</spring-version><jackson.version>2.5.4</jackson.version></properties><dependencies><dependency><groupId>javax.servlet</groupId><artifactId>jstl</artifactId><version>1.2</version></dependency><dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><version>2.5</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.21</version></dependency><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.4.1</version></dependency><dependency><groupId>org.mybatis</groupId><artifactId>mybatis-spring</artifactId><version>1.3.1</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>${spring-version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-core</artifactId><version>${spring-version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-beans</artifactId><version>${spring-version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-web</artifactId><version>${spring-version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>${spring-version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId><version>${spring-version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-tx</artifactId><version>${spring-version}</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.1.1</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>${jackson.version}</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>${jackson.version}</version></dependency><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>4.1.6</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.20</version><scope>provided</scope></dependency><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.11</version><scope>test</scope></dependency></dependencies>

3.web.xml

<?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_4_0.xsd"version="4.0"> <filter><filter-name>filter</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> </filter><filter-mapping><filter-name>filter</filter-name><url-pattern>/*</url-pattern></filter-mapping><servlet><servlet-name>mvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:applicationContext.xml</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>mvc</servlet-name><url-pattern>*.do</url-pattern></servlet-mapping> </web-app>

4.applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd"><context:component-scan base-package="cn" /><tx:annotation-driven transaction-manager="txManager" /><mvc:annotation-driven><mvc:message-converters><bean class="org.springframework.http.converter.StringHttpMessageConverter"><property name="supportedMediaTypes"><list><value>application/json;charset=UTF-8</value> </list></property></bean></mvc:message-converters></mvc:annotation-driven>   <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close"><property name="driverClassName" value="com.mysql.jdbc.Driver" /> <property name="url" value="jdbc:mysql://localhost:3306/db_book?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true" /><property name="username" value="root" /><property name="password" value="zjj" /></bean><bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource" /><property name="plugins"><bean class="com.github.pagehelper.PageHelper"><property name="properties"><value>dialect=mysqlreasonable=true</value> </property></bean></property></bean><bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"><property name="dataSource" ref="dataSource" /></bean><bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"><property name="basePackage" value="cn.kgc.mapper" /></bean><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/" /><property name="suffix" value=".html" /></bean> </beans>

5.實(shí)體類Book.java

package cn.kgc.entity; import lombok.Data; import java.io.Serializable;@Data public class Book implements Serializable {private Integer id;private String name;private String author;private String publish;private String publishdate;private Integer page;private Integer price;private String content; }

6.接口BookMapper

package cn.kgc.mapper; import cn.kgc.entity.Book; import org.apache.ibatis.annotations.Param; import java.util.List; import java.util.Map;public interface BookMapper {//無分頁版List<Map<String,Object>> findAll();//帶分頁版+模糊查詢List<Map<String,Object>> findAllByPage(@Param("book") Book book);//添加這邊不用map 用對象更好Integer addBook(Book book);//詳情Map<String,Object> findById(Integer id);//修改Integer updateBook(Book book);//刪除Integer delById(Integer id); }

7.映射類BookMapper.xml

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="cn.kgc.mapper.BookMapper"><select id="findAll" resultType="java.util.Map">select * from book</select><select id="findAllByPage" resultType="java.util.Map">select * from book where 1 = 1<if test="book.name != null and book.name != '' ">and `name` like concat('%',#{book.name},'%')</if></select><insert id="addBook" parameterType="cn.kgc.entity.Book">insert into book(`name`,author,publish,publishdate,page,price,content)values (#{name},#{author},#{publish},#{publishdate},#{page},#{price},#{content})</insert><select id="findById" parameterType="java.lang.Integer" resultType="java.util.Map">select * from book where id = #{id}</select><update id="updateBook" parameterType="cn.kgc.entity.Book">update bookset `name` = #{name},author = #{author},publish = #{publish},publishdate = #{publishdate},page = #{page},price = #{price},content = #{content}where id = #{id}</update><delete id="delById" parameterType="java.lang.Integer">delete from book where id = #{id}</delete> </mapper>

8.service接口BookService.java

package cn.kgc.service;import cn.kgc.entity.Book; import com.github.pagehelper.PageInfo; import org.apache.ibatis.annotations.Param;import java.util.List; import java.util.Map;public interface BookService {List<Map<String,Object>> findAll();//帶分頁版+模糊查詢PageInfo<Map<String,Object>> findAllByPage(Book book,Integer pageNo);//添加這邊不用map 用對象更好Integer addBook(Book book);//詳情Map<String,Object> findById(Integer id);//修改Integer updateBook(Book book);//刪除Integer delById(Integer id); }

9.serviceImpl接口BookServiceImpl.java

package cn.kgc.service;import cn.kgc.entity.Book; import cn.kgc.mapper.BookMapper; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional;import java.util.List; import java.util.Map;@Service @Transactional public class BookServiceImpl implements BookService {@Autowiredprivate BookMapper bookMapper;@Overridepublic List<Map<String, Object>> findAll() {return bookMapper.findAll();}@Overridepublic PageInfo<Map<String, Object>> findAllByPage(Book book, Integer pageNo) {PageHelper.startPage(pageNo,4);return new PageInfo<>(bookMapper.findAllByPage(book));}@Overridepublic Integer addBook(Book book) {return bookMapper.addBook(book);}@Overridepublic Map<String, Object> findById(Integer id) {return bookMapper.findById(id);}@Overridepublic Integer updateBook(Book book) {return bookMapper.updateBook(book);}@Overridepublic Integer delById(Integer id) {return bookMapper.delById(id);} }

10.BookController

package cn.kgc.controller;import cn.kgc.entity.Book; import cn.kgc.service.BookService; import com.github.pagehelper.PageInfo; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody;import java.util.List; import java.util.Map; @Controller public class BookController {@Autowiredprivate BookService bookService;@RequestMapping("/findAll.do")@ResponseBody//json的方式public List<Map<String,Object>> findAll(){//直接傳數(shù)據(jù) 不用stringList<Map<String, Object>> list = bookService.findAll();return list;}@RequestMapping("/findAllByPage.do")@ResponseBody//返回數(shù)據(jù) 不加就是返回頁面public PageInfo<Map<String,Object>>findAllByPage(@RequestParam(defaultValue = "1",required = false) Integer pageNo,@RequestParam(defaultValue = "",required = false) String name){// false表示可以不傳參數(shù) 即是空的Book book = new Book();book.setName(name);return bookService.findAllByPage(book,pageNo);}@RequestMapping("/add.do")@ResponseBodypublic String add(Book book){ // Integer flag = bookService.addBook(book);bookService.addBook(book); // if (flag > 0){return "ok"; // }else { return "error"; }}@RequestMapping("/delById.do")@ResponseBody//返回的時候以json的格式 @RequestBody請求的時候以json的格式如果沒有結(jié)果那就再加個@RequestParam(value = "id") 可能是編譯的問題public String delById(@RequestBody @RequestParam(value = "id") Integer id){bookService.delById(id);return "ok";}@RequestMapping("/findById.do")@ResponseBody//map會被 ResponseBody解析成json格式public Map<String,Object> findById(Integer id){return bookService.findById(id);}@RequestMapping("/update.do")@ResponseBodypublic String update(Book book){bookService.updateBook(book);return "ok";} }

說明：
在Spring MVC 中使用 @RequestMapping 來映射請求，
也就是通過它來指定控制器可以處理哪些URL請求。

11.findAll.html

結(jié)果：
http://localhost:8080/findAll.html

12.findAllByPage.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script><script type="text/javascript">$(function () {showData(1);//默認(rèn)為 1});function showData(pageNo) {$.ajax({url: "http://localhost:8080/findAllByPage.do",type: "post",data: {"pageNo":pageNo,"name":$("[name=name]").val()},dataType: "json",async: false,success:function (data) {$(".info").remove();var str = "";$.each(data.list,function (i) {str +="<tr class='info'>";str +=" <td>"+data.list[i].name+"</td>";str +=" <td>"+data.list[i].author+"</td>";str +=" <td>"+data.list[i].publish+"</td>";str +=" <td>"+data.list[i].publishdate+"</td>";str +=" <td>"+data.list[i].page+"</td>";str +=" <td>"+data.list[i].price+"</td>";str +=" <td>"+data.list[i].content+"</td>";str +=" <td>" +"<a href='javascript:void(0)' οnclick='delBook("+data.list[i].id+")'>刪除</a>" +"<a href='update.html?id="+data.list[i].id+"'>修改</a></td>";str +="</tr>";});str +="<tr class='info'>";str +=" <td colspan='8'>";str +=" <a href='javascript:void (0)' οnclick='showData(1)'>首頁</a>";str +=" <a href='javascript:void (0)' οnclick='showData("+data.prePage+")'>上一頁</a>";str +=" <a href='javascript:void (0)' οnclick='showData("+data.nextPage+")'>下一頁</a>";str +=" <a href='javascript:void (0)' οnclick='showData("+data.pages+")'>末頁</a>";str +=" </td>";str +="</tr>";$("table").append(str);},error:function () {}});}function delBook(id) {// var flag = confirm("確認(rèn)刪除嗎?");// if(flag>0){// alert(id);$.ajax({url: "http://localhost:8080/delById.do",type: "post",data: {"id": id},//json格式對象如果前面不寫RequestBody 瀏覽器也會自動解析把Integer id解析dataType: "text",async: false,success: function (data) {// alert("1234");if (data == "ok") {window.location.href = "findAllByPage.html";}},error: function () {}})// }}</script> </head> <body><table border="1px solid"><tr><th colspan="8">查詢列表頁面</th></tr><tr><td colspan="8"><input type="text" name="name" /><input type="button" value="書籍名稱查詢" onclick="showData(1)"></td></tr><tr><td>書名</td><td>作者</td><td>出版社</td><td>發(fā)布日期</td><td>總頁數(shù)</td><td>價格</td><td>內(nèi)容</td><td>操作</td></tr>         </table> </body> </html>

結(jié)果：
http://localhost:8080/findAllByPage.html

13.add.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script><script type="text/javascript">// 注意點(diǎn) 大寫小要統(tǒng)一實(shí)體類和數(shù)據(jù)庫用序列化的話并且用序列化必須寫formfunction cc() {$.ajax({url: "http://localhost:8080/add.do",type: "post",data: $("form").serialize(),// serialize 所有的name屬性都會封裝成對象后臺會直接獲取實(shí)體類要序列化// data: {"name":$("[name=name]").val(),"author":$("[name=author]").val()},XXXXXX,dataType: "text",// 字符串async: false,success: function (data) {if (data == "ok") {window.location.href = "findAllByPage.html"}},error: function () { }})}</script> </head> <body><form><table border="1px solid"><tr><td>書名</td><td><input type="text" name="name" /></td></tr><tr><td>作者</td><td><input type="text" name="author" /></td></tr><tr><td>出版社</td><td><input type="text" name="publish" /></td></tr><tr><td>發(fā)布日期</td><td><input type="date" name="publishdate" /></td></tr><tr><td>總頁數(shù)</td><td><input type="text" name="page" /></td></tr><tr><td>價格</td><td><input type="text" name="price" /></td></tr><tr><td>內(nèi)容</td><td><input type="text" name="content" /></td></tr><tr><td colspan="2" align="right"><input type="button" value="提交" onclick="cc()"></td></tr></table></form> </body> </html>

結(jié)果：

14.update.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script><script type="text/javascript">$(function () {var id = /\d+$/.exec(location.search)[0];// var reg = /表達(dá)式/附加參數(shù) $ 匹配字符串的結(jié)束// \d 匹配一個數(shù)字字符，等價于[0 - 9]// exec() 檢索字符中是正則表達(dá)式的區(qū)配，返回找到的值，并確定其位置返回的是一個數(shù)組所以獲取0$.ajax({url: "http://localhost:8080/findById.do",type: "post",data: {"id":id},dataType: "json",async: false,//如果一個里有兩個ajax 就必須要這個啊success: function (data) {$("[name=id]").val(data.id);$("[name=name]").val(data.name);$("[name=author]").val(data.author);$("[name=publish]").val(data.publish);$("[name=publishdate]").val(data.publishdate);$("[name=page]").val(data.page);$("[name=price]").val(data.price);$("[name=content]").val(data.content);},error: function () {}})})function update() {$.ajax({url: "http://localhost:8080/update.do",type: "post",data: $("form").serialize(),dataType: "text",async: false,success: function (data) {if (data == "ok"){window.location.href="findAllByPage.html";}},error: function () {}})}</script> </head> <body> <form><table border="1px solid"><input type="hidden" name="id"><tr><td>書名</td><td><input type="text" name="name" /></td></tr><tr><td>作者</td><td><input type="text" name="author" /></td></tr><tr><td>出版社</td><td><input type="text" name="publish" /></td></tr><tr><td>發(fā)布日期</td><td><input type="date" name="publishdate" /></td></tr><tr><td>總頁數(shù)</td><td><input type="text" name="page" /></td></tr><tr><td>價格</td><td><input type="text" name="price" /></td></tr><tr><td>內(nèi)容</td><td><input type="text" name="content" /></td></tr><tr><td colspan="2" align="right"><input type="button" value="提交" onclick="update()"></td></tr></table> </form> </body> </html>

結(jié)果：
http://localhost:8080/findAllByPage.html

上點(diǎn)擊書名lj修改就會跳到
http://localhost:8080/update.html?id=4

進(jìn)行修改就可以了。

15.附注

常見的三種json操作工具：
jackson,gson,fastjson

16.拓展

mybatis 配置中遇到的坑之二_qioutiandeyun的博客-CSDN博客
https://blog.csdn.net/qioutiandeyun/article/details/76747150

pagehelper dialect 支持哪些數(shù)據(jù)庫_百度知道 (baidu.com)
https://zhidao.baidu.com/question/757630544346753444.html

@ResponseBody注解使用（返回字符串并不跳轉(zhuǎn)） - AlexLiuF - 博客園 (cnblogs.com)
https://www.cnblogs.com/alexliuf/p/13967249.html

responseBody注解可以直接返回字符串 && springMVC Controller get請求返回字符串是中文亂碼解決 - 戈博折刀 - 博客園 (cnblogs.com)
https://www.cnblogs.com/libin6505/p/9805853.html

@ResponseBody返回4種數(shù)據(jù)格式的數(shù)據(jù)_人生幾度秋涼-CSDN博客_responsebody返回字符串
https://blog.csdn.net/weixin_42189604/article/details/82179660

----2021.12.18&12.21&12.22

總結(jié)

以上是生活随笔為你收集整理的SSM + Ajax的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

Ajax
ssm

上一篇： UEditor解析数据库中HTML标签，
下一篇：教程 | 阿克曼结构移动机器人的gaze