當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

SSM + Ajax

發布時間：2023/12/20 编程问答 20 豆豆

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

1.創建數據庫

2.創建工程，目錄，導入jquery類庫，并導入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.實體類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(){//直接傳數據不用stringList<Map<String, Object>> list = bookService.findAll();return list;}@RequestMapping("/findAllByPage.do")@ResponseBody//返回數據不加就是返回頁面public PageInfo<Map<String,Object>>findAllByPage(@RequestParam(defaultValue = "1",required = false) Integer pageNo,@RequestParam(defaultValue = "",required = false) String name){// false表示可以不傳參數即是空的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的格式如果沒有結果那就再加個@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

結果：
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);//默認為 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("確認刪除嗎?");// 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>發布日期</td><td>總頁數</td><td>價格</td><td>內容</td><td>操作</td></tr>         </table> </body> </html>

結果：
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">// 注意點大寫小要統一實體類和數據庫用序列化的話并且用序列化必須寫formfunction cc() {$.ajax({url: "http://localhost:8080/add.do",type: "post",data: $("form").serialize(),// serialize 所有的name屬性都會封裝成對象后臺會直接獲取實體類要序列化// 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>發布日期</td><td><input type="date" name="publishdate" /></td></tr><tr><td>總頁數</td><td><input type="text" name="page" /></td></tr><tr><td>價格</td><td><input type="text" name="price" /></td></tr><tr><td>內容</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>

結果：

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 匹配一個數字字符，等價于[0 - 9]// exec() 檢索字符中是正則表達式的區配，返回找到的值，并確定其位置返回的是一個數組所以獲取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>發布日期</td><td><input type="date" name="publishdate" /></td></tr><tr><td>總頁數</td><td><input type="text" name="page" /></td></tr><tr><td>價格</td><td><input type="text" name="price" /></td></tr><tr><td>內容</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>

結果：
http://localhost:8080/findAllByPage.html

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

進行修改就可以了。

15.附注

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

16.拓展

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

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

@ResponseBody注解使用（返回字符串并不跳轉） - 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種數據格式的數據_人生幾度秋涼-CSDN博客_responsebody返回字符串
https://blog.csdn.net/weixin_42189604/article/details/82179660

----2021.12.18&12.21&12.22

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Ajax
ssm

上一篇： UEditor解析数据库中HTML标签，
下一篇：推荐八款好用的项目管理工具