要实现这个需求，你需要在前端使用JavaScript和Ajax向后端发送请求，后端使用MyBatis来处理数据库操作。以下是一个简单的例子：
前端HTML页面（index.html）:
<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function sendData() {
var data = $('#dataInput').val(); // 获取输入值
$.ajax({
url: '/process_data', // 后端处理的URL
type: 'POST',
data: { data: data }, // 要发送的数据
success: function(response) {
// 处理成功的响应
console.log(response);
},
error: function(xhr, status, error) {
// 处理错误
console.error(error);
}
});
}
</script>
</head>
<body>
<input type="text" id="dataInput" placeholder="Enter data">
<button onclick="sendData()">Send Data</button>
</body>
</html>
后端Spring控制器（Spring Controller）:
import org.springframework.web.bind.annotation.*;
@RestController
public class DataController {
@Autowired
private DataService dataService;
@PostMapping("/process_data")
public String processData(@RequestParam String data) {
// 使用MyBatis处理数据库操作
dataService.processDataFromMyBatis(data);
return "Data processed successfully";
}
}
服务层（DataService）:
public interface DataService {
void processDataFromMyBatis(String data);
}
MyBatis映射器（DataMapper）:
@Mapper
public interface DataMapper {
// 根据需求定义操作数据库的方法
void insertData(@Param("data") String data);
}
MyBatis配置（mybatis-config.xml）:
<mapper namespace="com.yourpackage.DataMapper"/>
实现类（DataServiceImpl）:
@Service
public class DataServiceImpl implements DataService {
@Autowired
private DataMapper dataMapper;
@Override
public void processDataFromMyBatis(String data) {
// 调用MyBatis映射器中的方法
dataMapper.insertData(data);
}
}
以上代码提供了一个简单的框架，你需要根据实际的数据库操作来扩展DataMapper中的方法和MyBatis的映射文件。这个例子假设你已经配置好了Spring和MyBatis整合环境。