springboot+mybatis 前端有很多Inputs输入框 怎么通过ajax请求一次性传入后端 保存到数据库内 给出具体代码 要求用mybatis的xml文件模式 给出具体的前后端 和xml文件代码
时间: 2024-09-20 20:14:49 浏览: 76
Android+Java后端(Springboot+Mybatis)小商店项目源码+数据库+项目说明.zip
5星 · 资源好评率100%
在Spring Boot项目中结合MyBatis处理前端通过Ajax异步请求批量保存数据的情况,通常需要以下几个步骤:
**前端(JavaScript/AJAX,假设使用jQuery)**:
```javascript
// HTML表单或部分
<form id="dataForm">
<div>
<input type="text" name="name[]" />
<!-- 其他字段重复 -->
</div>
<!-- 可能有多组这样的input -->
<button onclick="saveData()">保存</button>
</form>
<script>
function saveData() {
var formData = $('#dataForm').serializeArray(); // 获取所有输入字段值
$.ajax({
url: '/api/save', // API endpoint for your Spring controller
method: 'POST',
data: formData,
contentType: 'application/x-www-form-urlencoded',
success: function(response) {
console.log('数据保存成功:', response);
},
error: function(xhr, status, error) {
console.error('保存失败:', error);
}
});
}
</script>
```
**后端(Spring Controller)**:
```java
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import com.example.YourEntity; // 假设实体类名为YourEntity
@RestController
public class YourController {
@PostMapping("/api/save")
public String saveData(@RequestBody List<YourEntity> entities) {
try {
for (YourEntity entity : entities) {
// 这里会去MyBatis的Mapper.xml文件关联操作
yourMapper.insert(entity);
}
return "数据已保存";
} catch (Exception e) {
throw new RuntimeException("保存数据失败", e);
}
}
}
```
**MyBatis XML映射文件**:
```xml
<mapper namespace="com.example.YourMapper">
<!-- 假设YourEntity有个id作为主键 -->
<insert id="insert" parameterType="YourEntity">
INSERT INTO your_table (field1, field2) VALUES (#{field1}, #{field2})
</insert>
<!-- 如果有其他自增ID,可以用insertWithGeneratedKeys -->
<!-- insertWithGeneratedKeys id="insertWithId" ... -->
</mapper>
```
记得在Spring Boot的配置文件`application.properties`中启用MyBatis支持:
```properties
spring.datasource.type=com.zaxxer.hikari.HikariDataSource
spring.jpa.hibernate.ddl-auto=update
mybatis.mapperLocations=classpath:mapper/*.xml
```
**
阅读全文