在这里记录一下json与ajax的使用方法与需要注意的事项
JSON
- 首先，使用ajax之前需要先对json有所了解：
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，目前使用特别广泛。
-
json是使用键值对的方法来储存数据的
列如：
{"name": "张三"}
{"age": "18"}
- JSON 是 JavaScript 对象的字符串表示法,本质是一个 字符串 。
- 在js中，JSON 和 js 对象互转
<script type="text/javascript">
//定义一个对象
var user = {
name:"张三",
age:18
};
//将js对象转换成json字符串
var str = JSON.stringify(user);
//将json字符串转换为js对象
var userStr = JSON.parse(str);
</script>
环境搭建
-
使用spring MVC,使用maven构建项目
- 引入依赖坐标，这里使用jacksonhttps://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind/2.10.1
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.10.1</version>
</dependency>
- 编写配置springMVC配置文件，加上解决中文乱码配置
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<constructor-arg value="UTF-8"/>
</bean>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="objectMapper">
<bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
<property name="failOnEmptyBeans" value="false"/>
</bean>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
JSON简单使用
- 编写一个user用户实体类
public class User {
private String name;
private int age;
private String sex;
// 以下为构造方法，get和set方法，toString方法。。。
}
-
编写一个Controller
注意事项：
以下编写了3种方法
1.实体对象转换JSON字符串格式，返回前端
2.后端返回一个集合，返回前端
3.后端返回时间并处理，且去除时间戳转换，返回前端
// 或者使用@RestController注解，如果使用@RestController注解，则下列所有方法无需再添加@ResponseBody注解
@Controller
public class UserController {
// 将后台实体对象转换成JSON字符串返回给前端
@RequestMapping("/json1")
@ResponseBody
public String json1() throws JsonProcessingException {
// 1、创建一个jackson的对象映射器，用来解析数据
ObjectMapper mapper = new ObjectMapper();
// 2、创建一个用户对象
User user = new User("张三1", 18, "男");
// 3、将我们的对象解析成为json格式
String str = mapper.writeValueAsString(user);
// 4、由于@ResponseBody注解，这里会将str转成json格式返回；十分方便
return str;
}
// 返回一个List集合
@RequestMapping("/json2")
@ResponseBody
public String json2() throws JsonProcessingException {
//创建一个jackson的对象映射器，用来解析数据
ObjectMapper mapper = new ObjectMapper();
//创建一个对象
User user1 = new User("张三1号", 18, "男");
User user2 = new User("张三2号", 18, "男");
User user3 = new User("张三3号", 18, "男");
User user4 = new User("张三4号", 18, "男");
List<User> list = new ArrayList<User>();
list.add(user1);
list.add(user2);
list.add(user3);
list.add(user4);
//将我们的对象解析成为json格式
String str = mapper.writeValueAsString(list);
return str;
}
// 从后端生成一个当前时间，并返回至前端
@RequestMapping("/json3")
@ResponseBody
public String json3() throws JsonProcessingException {
ObjectMapper mapper = new ObjectMapper();
//不使用时间戳的方式
mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
//自定义日期格式对象
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
//指定日期格式
mapper.setDateFormat(sdf);
Date date = new Date();
String str = mapper.writeValueAsString(date);
return str;
}
}
AJAX
- 这里直接使用jQuery提供的js库
jQuery.ajax(...)
部分参数：
url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
headers：请求头
data：要发送的数据
contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async：是否异步
timeout：设置请求超时时间（毫秒）
beforeSend：发送请求前执行的函数(全局)
complete：完成之后执行的回调函数(全局)
success：成功之后执行的回调函数(全局)
error：失败之后执行的回调函数(全局)
accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
dataType：将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
-
以上需要重点掌握url，type，data，success（回调函数）
接下来使用ajax编写一个登录例子
1.编写一个AjaxController
- 这里使用@ResponseBody是因为，springMvc默认会使用视图解析器将返回值进行处理，跳转页面。添加了@ResponseBody则springMVC不会调用视图解析器。
@Controller
@RequestMapping("/user")
public class AjaxController {
@RequestMapping("/login")
@ResponseBody
public void ajax1(String username, String password) {
// 验证用户名是否等于admin，密码是否等于123456
String msg = "";
//模拟数据库中存在数据
if (name!=null){
if ("admin".equals(name)){
msg = "用户名正确";
}else {
msg = "用户名输入错误";
}
}
if (pwd!=null){
if ("123456".equals(pwd)){
msg = "密码正确";
}else {
msg = "密码输入有误";
}
}
return msg; //由于@ResponseBody注解，将msg转成json字符串格式返回
}
}
2.页面引入jQuery。可以使用在线的CDN ， 也可以下载导入
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
3.JSP页面 login.jsp
- 使用鼠标焦点事件，验证用户名与密码是否正确
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<script>
function nameVerify(){
$.ajax({
url:"${pageContext.request.contextPath}/user/login",
type: "post"
data:{
'username':$("#username").val()
},
success:function (data) {
if (data.toString()=='用户名正确'){
$("#nameInfo").css("color","green");
}else {
$("#nameInfo").css("color","red");
}
$("#nameInfo").html(data);
}
});
}
function pwdVerify(){
$.ajax({
url:"${pageContext.request.contextPath}/user/login",
type: "post"
data:{
'password':$("#password").val()
},
success:function (data) {
if (data.toString()=='密码正确'){
$("#password").css("color","green");
}else {
$("#password").css("color","red");
}
$("#pwdInfo").html(data);
}
});
}
</script>
</head>
<body>
<p>
用户名:<input type="text" id="username" onblur="nameVerify()"/>
<span id="nameInfo"></span>
</p>
<p>
密码:<input type="text" id="password" onblur="pwdVerify()"/>
<span id="pwdInfo"></span>
</p>
</body>
</html>
