之前跟着视频学习时候就了解到,ajax是可以不刷新整个页面情况下,进行数据交换和更新。学习完后,为了加深理解,特地重新研究了下ajax和JSON之间的交互。
注意,要使用ajax,需要先引用jquery!
1.1、在pom引入json和jackson的jar包
<!--json-->
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>
<!-- jackson -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.8.1</version>
</dependency>
这样,引入后就可以直接使用@ResponseBody
来注解方法,并封装JSON
1.2 前端发送ajax请求
代码如下(test.jsp,目录在webapp下)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
用户名:<input type="text" name="name"><br>
密码:<input type="text" name="pw"><br>
<input type="button" id="b1" value="提交"><br>
</body>
<script>
$(function () {
$("#b1").click(function () {
$.ajax({
url: "/zyf/test", //后台url
data: { //数据
name:$("input[name='name']").val(),
pw:$("input[name='pw']").val()
},
type: "POST", //类型,POST或者GET
dataType: 'json', //数据返回类型,可以是xml、json等
success: function (data) { //成功,回调函数
alert(data.result);
},
error: function (er) { //失败,回调函数
alert(er);
}
});
})
})
</script>
</html>
ajax解释说明:
a)我们设置的方法为,只要点击“id=b1”的按钮,就会触发这个函数
b)注意引用jquery!
c)ajax要发送好几个数据。
- url:发送的请求地址(类似于action),后台controller用@RequestMapping的value属性接受请求
- type:请求方式(如post,get,delete等),controller的method属性与之对应一样
- dataType:数据返回的类型,可以是xml,json等,我们这里声明清楚是json类型。
- data:要传进去的数据,格式为
key:value
,controller里可以在方法的参数里,使用@RequestParam("value")
来获取这个数 - success:成功返回数据后要执行的操作,此处我们是弹出结果。里面的data(自定义名字,你取名aaa都行)即对应着controller里的
return XXX
的XXX 。(后面再详讲)
1.3 controller写法
代码如下(TestController.java)
package com.atguigu.LearnTest.controller;
import net.sf.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class TestController {
@RequestMapping(value = "/zyf/test", method = RequestMethod.POST)
@ResponseBody
public JSONObject CeShi(@RequestParam("pw") String pw, @RequestParam("name") String name) {
JSONObject jsonObject = new JSONObject();
if ("".equals(pw) && "".equals(name))
jsonObject.put("result", "用户名和密码都为空!");
else if ("".equals(name))
jsonObject.put("result", "用户名为空!");
else if ("".equals(pw))
jsonObject.put("result", "密码为空!");
else
jsonObject.put("result", name);
return jsonObject;
}
}
解释说明:
- 该方法使用了两个注解,这里我们只简介下@ResponseBody:它可以自动将该函数的返回的数据封装成json模式,然后传给前端内容(就目前阶段而说,想要用json的话,直接在方法上添加@ResponseBody总是没错的)
- 这里使用了JSONObject类型。其实简单来说,这个就是个特殊的“Map”。不同的是,JSONObject的键值写法为
key:value
、map中是key=value
。所以这里不用纠结很多,把它当Map看就好了 - @RequestParam将获取到的值传递给参数
- jsonObject.put即添加 键值对
- 返回JSONObject,即对应着ajax的data。然后返回看jsp部分,就可以知道,我们将要alert弹出data.name(即jsonObject.name)
- -
1.4、运行及效果图
1.5 Controller其他写法
controller的类型不仅仅限制于Map JSONObject这些。还可以是String等等,比如我做如下修改,将JSONObject改为String类型,然后直接返回一个String类型的ce
@RequestMapping(value = "/zyf/test", method = RequestMethod.POST)
@ResponseBody
public String CeShi(@RequestParam("pw") String pw, @RequestParam("name") String name) {
String ce="123456";
return ce;
}
前端的ajax把success的部分修改下:
...前面内容略
success: function (data) { //成功,回调函数
alert(data);
},
...后面内容略
就会弹出如下效果:(这也正好验证了,data参数(随便取名)对应着controller中return的对象(即,data=ce))