Ajax+SSM 实现客户端开发 实现简单的前后端分离
作者：Bug终结者
- 2021 年 12 月 21 日
本文字数：4412 字
阅读完需：约 14 分钟
Ajax+SSM 实现客户端开发
引言
本文实现基于 JS Ajax+SpringMVC 实现客户端功能，详细需求如下
需求
写一个 edit.html 文件，可以显示企业的信息。
点击保存将企业信息保存到数据表中。
效果图
数据表结构
CREATE TABLE `t_company` ( `noid` int(11) NOT NULL AUTO_INCREMENT, `company_name` varchar(32) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '公司名称', `zhuce_money` decimal(10,2) DEFAULT NULL COMMENT '注册资金', PRIMARY KEY (`noid`)) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
复制代码
注意：数据表中只有一条企业信息，没有则新增、有了就编辑。
* 请基于 js ajax+spring mvc 实现前后端分离，实现企业信息的编辑。
* 要求服务端必须是 SpringMVC 三层架构的，服务端基于 mybatis 将数据保存在数据库中。**
pom 依赖
<dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.13.2</version> <scope>test</scope> </dependency>
<dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <scope>provided</scope> </dependency>
<dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.3.13</version> </dependency>
<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.9.10</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.10</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.9.10</version> </dependency>
<!-- mybatis 相关的依赖 --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>5.3.13</version> </dependency>
<dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.49</version> </dependency>
<dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.2.8</version> </dependency>
<dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5.7</version> </dependency>
<dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>2.0.6</version> </dependency>
</dependencies>
<properties> <maven.compiler.source>8</maven.compiler.source> <maven.compiler.target>8</maven.compiler.target> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <maven.compiler.encoding>UTF-8</maven.compiler.encoding> </properties>
复制代码
服务端核心代码
CompanyController 类：
@Controller@CrossOrigin@RequestMapping("/company")public class CompanyController {
@Autowired private CompanyService companyService;
@ResponseBody @PostMapping("/saveCompany.do") public ResultBean<Company> saveCompany(@RequestBody Company param) { ResultBean<Company> res = companyService.saveCompany(param); return res; }}
复制代码
大致解释下意思：
==CrossOrigin==：解决跨域问题，客户端与服务端代码不在一个地址时，客户端访问服务端代码会出现跨域问题，因为 Spring MVC 默认不允许跨域访问，所以我们加上该注解允许跨域访问
==ResponseBody==：Spring MVC 中要想将数据返回字符串，就必须加上该注解，如果不加，默认为转发
==RequestBody==：在参数中加上该注解，表明前端返回的是一个 JSON 字符串的形式，通过该注解映射实体类
ResultBean 统一返回类：
package com.wanshi.spring.entity;
public class ResultBean<C> {
private Integer code;
private String msg;
private C data;
private ResultBean(Integer code, String msg, C data) { this.code = code; this.msg = msg; this.data = data; }
public static ResultBean create(Integer code, String msg, Object data) { ResultBean res = new ResultBean(code, msg, data); return res; }
public Integer getCode() { return code; }
public void setCode(Integer code) { this.code = code; }
public String getMsg() { return msg; }
public void setMsg(String msg) { this.msg = msg; }
public C getData() { return data; }
public void setData(C data) { this.data = data; }}
复制代码
CompanyService 类：
@Servicepublic class CompanyService {
@Autowired private CompanyMapper companyMapper;
/** * 从数据库中获取数据库中的数据 * @return */ public ResultBean<Company> get() { Company company = companyMapper.get(); return ResultBean.create(0, "success", company); }
/** * 保存公司信息，进行新增或修改 * @param param * @return */ public ResultBean<Integer> saveCompany(Company param) { Company company = companyMapper.get(); if (company != null) { company.setCompany_name(param.getCompany_name()); company.setZhuce_money(param.getZhuce_money()); companyMapper.update(company); } else { companyMapper.insert(param); } Company company1 = companyMapper.get(); return ResultBean.create(0, "success", 0); }}
复制代码
前端核心代码
ajax.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> button{ width: 80px; height: 40px; background-color: cadetblue; border: none; text-align: center; border-radius: 10px; color: #fff; } </style></head><body> <h2>修改企业信息</h2> <div> <p> <label>企业名称：</label> <input type="text" id="company_name"> </p> <p> <label>注册资金：</label> <input type="text" id="zhuce_money"> 万元 </p> <button id="saveCompany">保存</button> </div></body></html><script src="js/jquery-3.6.0.js"></script><script> //打开页面时就加载此函数 $(function () { getCompany(); $("#saveCompany").click(function () { //获取输入框中的数据 let company_name = $("#company_name").val(); let zhuce_money = $("#zhuce_money").val(); let url = "http://localhost:8087/AjaxServer/company/saveCompany.do"; let data = {"company_name":company_name,"zhuce_money":zhuce_money}; $.ajax({ url:url, //这里极其重要，如果不转化为json格式，则会报400请求出错 data:JSON.stringify(data), type:'post', //传输到后端的参数类型为json contentType : 'application/json;charset=utf-8', dataType:'json', //回调函数，表明如果请求成功则进入该函数内，参数为服务端返回的数据 success: function (res) { console.log(res); $("#company_name").val(res.data.company_name); $("#zhuce_money").val(res.data.zhuce_money); getCompany(); } }) }) })
/** * * 初始化加载回显数据 * */ function getCompany() { let url = "http://localhost:8087/AjaxServer/company/get_company.do"; let data = {}; $.get(url, data, function (res) { $("#company_name").val(res.data.company_name); $("#zhuce_money").val(res.data.zhuce_money); }, 'json'); }</script>
复制代码
结语
至此，一个简单的基于 Ajax+SSM 的前后端分离项目完美结束，一定要多加练习，熟悉其中的执行流程，心中明确，努力练习，摆正心态，你会拥有一个崭新的未来！
若在本项目中遇到技术难题，可在下方评论区留言或私信我，授人以鱼不如授人以渔
如果你觉得博主写的不错的话，不妨给个一键三连，点击下方小拳头即可一键三连。
感谢你的支持！
划线
评论
复制
发布于: 1 小时前阅读数: 4
版权声明: 本文为 InfoQ 作者【Bug终结者】的原创文章。
原文链接:【http://xie.infoq.cn/article/b06532e2c1775cf3261e6b4bc】。文章转载请联系作者。
Bug终结者
关注
励志成为一个优秀的开发者～ 2021.12.09 加入
星星之火，可以燎原
评论