java_springMVC_ajax

不念不忘少年蓝@ 2022-05-25 04:19 194阅读 0赞

1) 引入jquery

为了更方便的使用ajax，先引入jquery。

在根目录（WEB-INF的上级目录）中新建一个js目录，将jquery复制过来：

![70][]

然后在addUser.jsp中引入：

src=*"http://localhost:8080/firstSpringMVC/js/jquery-1.11.2.min.js"*></script>

运行起来试一下页面是否报错,发现确实报错了，找不到js文件：

![70 1][]

此时后台也报错了：

警告: 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>省份：

<select name=*"city"*>

<option value=*"000001"*>北京市</option>

<option value=*"000002"* selected=*"selected"*>天津市</option>

<option value=*"000003"*>上海市</option>

</select>

</p>

<p>爱好：

</p>

<p>性别：

</p>

</form>

![70 2][]

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

![70 3][]

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";

![70 4][]

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

\});

![70 5][]

![70 6][]

上面的serialize()方法将标签下的name元素转为json对象了。也可以使用serializeArray()方法转为对象数组。Controller一样可以接受到参数值。

**var** params = $("\#userform").serializeArray();

![2018050809125967][]

那么如果不是表单的元素，或在上面的基础上，还需要增加非表单元素值呢。

那就可以先得到对象数组，再调用其push方法将其他标签对象的json对象 添加进去。详细可参见后在json那一节。

**日期类型**

上面的例子中，form表单中的值直接映射到了参数user中。那是因为springMVC中有一个默认的转换器：org.springframework.context.support.ConversionServiceFactoryBean

它会自动转换字符串、数字等常用数据类型。

但是，它处理不了日期类型。因为在页面中日期类型返回的就是一个字符串，而类属性中日期类型为一个对象，这种转换需要我们自己实现。

在页面中增加一个生日，对应一个文本输入框（其他章节会介绍使用第三方控制，显示一个日期选择框，但结果还是一个字符串）：

在user类中添加一个日期类型的变量：

![20180508091351961][]

启动服务，点ajax提交，页面报错：

![70 7][]

方法一：使用@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";

输出内容如下：

![70 8][]

方法二：使用自定义转换

方法一非常简单，但是转换日期的格式是固定的。

要处理日期类型的转换，需分三步：

①　第一步：创建转换类

创建一个类，派生自PropertyEditorSupport。重写setAsText方法。将日期字串转为日期对象。

![20180508091556343][]

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

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

[70]: /images/20220525/71cff85f46fe4de686cbe3be42dc28f6.png
[70 1]: /images/20220525/de35df1b779f4c8db9c9d823798ba836.png
[70 2]: /images/20220525/50e3d4efde1241ab9af7f5aa1f352a4c.png
[70 3]: /images/20220525/5f74f9b472234d129c6af21d6ecca0e0.png
[70 4]: /images/20220525/da05a31551344dc09b1fd395973f8757.png
[70 5]: /images/20220525/241b23f58db3427eb1fb31c74ba1840e.png
[70 6]: /images/20220525/ad3ef30211bc46c6869c49d092496bf0.png
[2018050809125967]: /images/20220525/5d288dabfeb54df780d14f7536bf5584.png
[20180508091351961]: /images/20220525/e9e7699225e34b298f572dcd69098fde.png
[70 7]: /images/20220525/34c9123f1e134eca946a8e9abfcfd788.png
[70 8]: /images/20220525/a1d02691e83d4b5cbdd05079cc56ca53.png
[20180508091556343]: /images/20220525/33c66b9d07634ac382bb3290c5106be4.png

java_springMVC_ajax

发表评论取消回复

还没有评论，来说两句吧...

相关阅读