Spring 3.0.5+JSON+Ajax

配置参考:[url]http://xiaoyaozjl.iteye.com/blog/1457182[/url]
源码参考:[url]http://xace.iteye.com/blog/731263[/url]
这里是另一种方法:[url]http://javaest.iteye.com/blog/187504[/url]

[b][color=red]特别注意[/color]:[/b]SpringMVC 3.0.5
去掉SpringMVC的自带包:com.springsource.org.codehaus.jackson.mapper-1.0.0.jar
加入:[[url]http://www.jarvana.com/jarvana/browse/org/[/url] 到这里去找]
jackson-core-asl-1.6.4.jar
jackson-mapper-asl-1.6.4.jar

<!-- 配置SpringMVC @ResponseBody和@RequestBody注解 -->
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<list>
<ref bean="jsonHttpMessageConverter" />
</list>
</property>
</bean>
<bean id="jsonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
</bean>



package com.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.pojo.Users;

@Controller
public class JSONController {
@RequestMapping(value = "getUserListFromServer", method = RequestMethod.GET)
@ResponseBody
public Map<String, Object> getUserList() {

Map<String, Object> modelMap = new HashMap<String, Object>(3);
modelMap.put("total", "1");
modelMap.put("data", getUsers());
modelMap.put("success", "true");
return modelMap;
}

public List<Users> getUsers() {

List<Users> list = new ArrayList<Users>();
for (int i = 0; i < 5; i++) {
Users user = null;
user = new Users();
user.setName("Pandy " + i);
user.setPassword("pandy " + i);
user.setEmail("panyongzheng@163.com " + i);
user.setRemarks("Nothing " + i);
user.setId(i);
list.add(user);
}
return list;
}

@RequestMapping(value = "commitToServer", method = RequestMethod.POST)
@ResponseBody
public Map<String, String> addUser(@RequestBody Users user) {
System.out.println(user.getName());
Map<String, String> map = new HashMap<String, String>(1);
map.put("success", "true");
return map;
}

}




getFromServer = function() {
alert("getFromServer");
$.ajax({
type : "GET",
url : "getUserListFromServer.do",
data : "name=John&location=Boston",
contentType : 'application/json', //这里可以不加上,但是要是提交的是json对象字符串的话,必须加上.
dataType : 'json',//这里可以不加上,但是要是提交的是json对象字符串的话,必须加上.
success : function(obj) {
alert("Data Saved: " + JSON.stringify(obj));
},
error: function(obj, s1, s2){
alert(JSON.stringify(obj));
},
complete : function(obj, s1){
alert("complete:"+s1);
}
});
}
commitToServer = function() {
alert("commitToServer");
var obj = {};
obj.name="Pandy";
obj.email="test@163.com";
var param = JSON.stringify(obj);
alert(param);
$.ajax({
type : "POST",
url : "commitToServer.do",
data : param,
contentType : 'application/json', //这里必须要加上.
dataType : 'json',
success : function(obj) {
alert(JSON.stringify(obj));
},
error: function(obj, s1, s2){
alert(JSON.stringify(obj));
},
complete : function(obj, s1){
alert("complete:"+s1);
}
});
}


本文将介绍如何使用Spring Boot、MyBatis-Plus、Ajax、Layui和MySQL实现员工注册功能。 这个注册功能包含了员工ID自增的实现,让我们看看如何完成这个任务。 1.创建项目和数据库 首先,我们需要创建一个Spring Boot项目,并创建一个名为employee的数据库,其中包含一个名为emp的员工表。 CREATE TABLE `emp` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `age` int(11) NOT NULL, `sex` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4; 2.添加依赖 我们需要添加以下依赖项: <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.0.5</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.26</version> </dependency> </dependencies> 3.配置数据源 我们需要在application.properties中配置数据源: spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/employee?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai spring.datasource.username=root spring.datasource.password=123456 4.配置MyBatis-Plus 在使用MyBatis-Plus之前,我们需要正常配置MyBatis,并至少创建一个Mapper。这里我们以EmployeeMapper为例: @Mapper public interface EmployeeMapper extends BaseMapper<Employee> { } 然后,我们在application.properties中添加以下配置: # mapper扫描 mybatis-plus.mapper-locations=classpath*:/mapper/*.xml # 实体扫描 mybatis-plus.typeAliasesPackage=com.example.demo.entity 5.创建实体类 我们需要创建一个名为Employee的实体类,其属性与emp表中的列相对应。 @Getter @Setter @ToString @NoArgsConstructor @AllArgsConstructor public class Employee { private Long id; private String name; private Integer age; private String sex; } 6.创建控制器和页面 接下来,我们需要创建一个EmployeeController,通过此控制器向客户端提供员工注册页面和保存方法。 @Controller public class EmployeeController { @GetMapping("/employee") public String index() { return "employee/register"; } @PostMapping("/employee/save") @ResponseBody public Long save(@RequestBody Employee employee) { employeeMapper.insert(employee); return employee.getId(); } @Autowired private EmployeeMapper employeeMapper; } 然后,我们在resources/templates目录下创建一个register.html页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Employee Register</title> <link rel="stylesheet" href="//cdn.bootcss.com/layui/2.5.6/css/layui.min.css"> <style> form {margin: 20px auto; width: 500px;} .layui-input-block {margin-right: 0;} </style> </head> <body> <div class="layui-container"> <div class="layui-card layui-anim layui-anim-up"> <div class="layui-card-header">Employee Register</div> <div class="layui-card-body"> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">Name</label> <div class="layui-input-block"> <input type="text" name="name" required lay-verify="required" placeholder="Name" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">Age</label> <div class="layui-input-block"> <input type="text" name="age" required lay-verify="required|number" placeholder="Age" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">Sex</label> <div class="layui-input-block"> <input type="radio" name="sex" value="male" title="Male" checked> <input type="radio" name="sex" value="female" title="Female"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="save">Register</button> </div> </div> </form> </div> </div> </div> <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="//cdn.bootcss.com/layui/2.5.6/layui.min.js"></script> <script> layui.use(['form', 'layer'], function() { var form = layui.form, layer = layui.layer; form.on('submit(save)', function(data) { $.ajax({ url: '/employee/save', type: 'POST', data: JSON.stringify({ name: data.field.name, age: data.field.age, sex: data.field.sex }), contentType: 'application/json', success: function(id) { layer.msg('Your employee ID is ' + id); } }); return false; }); }); </script> </body> </html> 7.运行 现在,我们可以启动Spring Boot应用程序,并打开浏览器访问http://localhost:8080/employee,创建一个员工记录。您将看到一个注册表单,输入完信息后,单击“注册”按钮。之后,它将通过Ajax将信息发送到控制器,并将Employee对象保存到数据库中。成功后,您将获得新创建的员工ID。 到这里,我们已经成功地使用Spring Boot、MyBatis-Plus、Ajax、Layui和MySQL实现了员工注册功能,包含了员工ID自增的实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值