java_springMVC_ajax
1) 引入jquery
为了更方便的使用ajax,先引入jquery。
在根目录(WEB-INF的上级目录)中新建一个js目录,将jquery复制过来:
然后在addUser.jsp中引入:
<script type="text/javascript"
src="http://localhost:8080/firstSpringMVC/js/jquery-1.11.2.min.js"></script>
运行起来试一下页面是否报错,发现确实报错了,找不到js文件:
此时后台也报错了:
警告: No mapping found for HTTP request with URI [/firstSpringMVC/js/jquery-1.11.2.min.js] in DispatcherServlet with name 'springMVCName'
因此需要在web.xml中增加如下配置:
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.js</url-pattern>
</servlet-mapping>
//没有配置静态资源,先用上面的配置用着,后面再介绍使用静态资源
2) 修改页面标签
还是上面的form表单,为sform标签加上一个id值,方便在js中获取标签。
为每个选项添加一个默认值。
Text文本标签使用value="30"
select下拉框使用selected="selected"
Checkbox复选框使用checked="checked"
Radio单选框使用checked="checked"
<form id="userform" action="saveUser2" method="post">
<p><input type="text" name="username" placeholder="请输入用户名。。。" value="gary" autofocus="autofocus"/></p>
<p><input type="text" name="age" placeholder="请输入年龄。。。" value="30"/></p>
<p><input type="text" name="phone" placeholder="请输入电话。。。" value="15001339718"/></p>
<p>省份:
<select name="city">
<option value="000001">北京市</option>
<option value="000002" selected="selected">天津市</option>
<option value="000003">上海市</option>
</select>
</p>
<p>爱好:
<label><input type="checkbox" name="interests" value="1" checked="checked"/>爬山</label>
<label><input type="checkbox" name="interests" value="2"/>旅游</label>
<label><input type="checkbox" name="interests" value="3" checked="checked"/>打球</label>
</p>
<p>性别:
<label><input type="radio" name="sex" value="1" checked="checked"/>男</label>
<label><input type="radio" name="sex" value="2"/>女</label>
<label><input type="radio" name="sex" value="3"/>保密</label>
</p>
<p><input type="submit" value="提交"/></p>
<p><input type="button" onclick="ajaxSubmit()" value="ajax提交"></p>
</form>
3) 组织参数
function ajaxSubmit(){
// 获取参数
var username = $("input[name='username']").val();
var age = $("input[name='age']").val();
var phone = $("input[name='phone']").val();
var city = $("select[name='city']").val();
var arr=[];// 兴趣爱好是个复选框,可以多选
$("input[name='interests']:checked").each(function(){
arr.push($(this).val());
});
var interests = arr.toString();
var sex = $("input[name='sex']:checked").val();
var params = {
username:username,// 也可以写成"username":username,但是不建议前面加引号
age:age,
phone:phone,
city:city,
interests:interests,
sex:sex
}
alert(JSON.stringify(params));
}
4) ajax
$.ajax({
type:"post",
url:"http://localhost:8080/firstSpringMVC/user/ajaxSaveUser",
data:params,
success:function(data){
alert(data);
}
});
2) 后台接收
@ResponseBody
@RequestMapping(value = "/ajaxSaveUser", method = RequestMethod.POST)
public String ajaxSaveUser(User user) {
System.out.println("user.username - " + user.getUsername());
return "success";
}
6) 优化参数获取
前面是一个一个标签的获取,然后拼出的一个json对象作为参数。
其实也可以直接获取form标签的数据。
// 获取参数:方法二,一步全部获取
var params = $("#userform").serialize();
alert(JSON.stringify(params));
$.ajax({
type:"post",
url:"http://localhost:8080/firstSpringMVC/user/ajaxSaveUser",
data:params,
success:function(data){
alert(data);
}
});
上面的serialize()方法将标签下的name元素转为json对象了。也可以使用serializeArray()方法转为对象数组。Controller一样可以接受到参数值。
var params = $("#userform").serializeArray();
那么如果不是表单的元素,或在上面的基础上,还需要增加非表单元素值呢。
那就可以先得到对象数组,再调用其push方法将其他标签对象的json对象 添加进去。详细可参见后在json那一节。
日期类型
上面的例子中,form表单中的值直接映射到了参数user中。那是因为springMVC中有一个默认的转换器:org.springframework.context.support.ConversionServiceFactoryBean
它会自动转换字符串、数字等常用数据类型。
但是,它处理不了日期类型。因为在页面中日期类型返回的就是一个字符串,而类属性中日期类型为一个对象,这种转换需要我们自己实现。
在页面中增加一个生日,对应一个文本输入框(其他章节会介绍使用第三方控制,显示一个日期选择框,但结果还是一个字符串):
<p>生日:<input type="text" name="birthday" value="2016-01-11 08:12:14"/></p>
在user类中添加一个日期类型的变量:
启动服务,点ajax提交,页面报错:
方法一:使用@DateTimeFormat注解
在user类的日期类型成员变量前添加注解:
@DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")
private Date birthday;
然后测试:
@ResponseBody
@RequestMapping(value = "/ajaxSaveUser", method = RequestMethod.POST)
public String ajaxSaveUser(User user) {
System.out.println("user.username - " + user.getUsername());
System.out.println("user.birthday - " + user.getBirthday());
return "success";
}
输出内容如下:
方法二:使用自定义转换
方法一非常简单,但是转换日期的格式是固定的。
要处理日期类型的转换,需分三步:
① 第一步:创建转换类
创建一个类,派生自PropertyEditorSupport。重写setAsText方法。将日期字串转为日期对象。
public class DateFormateEditor extends PropertyEditorSupport{
@Override
public void setAsText(String text) throws IllegalArgumentException {
if ((text != null) && (!text.isEmpty())){
String sPattern = "yyyy-MM-dd";
if (text.indexOf(":") != -1){
sPattern = "yyyy-MM-dd HH:mm:ss";
}
try {
setValue(new SimpleDateFormat(sPattern).parseObject(text));
} catch (ParseException e) {
setValue(null);
}
}
else{
setValue(null);
}
}
}
② 第二步:注册转换类
直接在UserController类中添加如下代码:
@InitBinder
public void initDataBinder(WebDataBinder dataBinder){
dataBinder.registerCustomEditor(Date.class, new DateFormateEditor());
}
因为当时学习时没有成功,因此学习笔记也就到这里了,后面如果有用到再来补吧。