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;
@GetMapping("/get_company.do")
public ResultBean<Company> getCompany() {
ResultBean<Company> res = companyService.get();
return res;
}
@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类：
@Service
public 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的前后端分离项目完美结束，一定要多加练习，熟悉其中的执行流程，心中明确，努力练习，摆正心态，你会拥有一个崭新的未来！
若在本项目中遇到技术难题，可在下方评论区留言或私信我，授人以鱼不如授人以渔
如果你觉得博主写的不错的话，不妨给个一键三连，点击下方小拳头即可一键三连。
感谢你的支持！
