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());

}

因为当时学习时没有成功，因此学习笔记也就到这里了，后面如果有用到再来补吧。