Ajax_Json
1.Json
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
语法：
- 基本规则
- 数据在名称/值对中：json数据是由键值对构成的
- 数据由逗号分隔：多个键值对由逗号分隔
- 花括号保存对象：使用{}定义json 格式
- 方括号保存数组：[]
1.1对象与Json字符串相互转换
前端转换
<script type="text/javascript">
var user = {
name : "ygp",
age : 20
};
console.log(user);
//将js对象转换为json字符串
var s = JSON.stringify(user);
console.log(s);
//将json字符串转换为对象
var parse = JSON.parse(s);
console.log(parse);
</script>
后端转换
@RequestMapping("/json1")
@ResponseBody
public String json1() throws JsonProcessingException {
//创建一个映射器，就是一个类，将对象转换为json字符串
ObjectMapper mapper = new ObjectMapper();
User user = new User("苑", 18);
System.out.println(user);
//将java对象转换为json字符串
String str = mapper.writeValueAsString(user);
System.out.println(str);
return str;//由于使用了ResponseBody注解，这里会将str以json的方式返回
}
解决乱码
1.RequestMapping注解上解决
/**
* 发现乱码，需要在RequestMapping注解的produces属性设置：
* produces = "application/json;charset=utf-8"
* @return
* @throws JsonProcessingException
*/
@RequestMapping(value = "/json2",produces = "application/json;charset=utf-8")
2.在springmvc.xml中解决
<mvc:default-servlet-handler/>
<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>
注意：第二种方法不能和下面的配置同事使用，否则将会无效
<!--开启springmvc注解支持-->
<mvc:annotation-driven></mvc:annotation-driven>
1.2将系统时间以Json字符串方式返回
编写工具类
public class JsonUtils {
public static String getJson(Object obj) throws JsonProcessingException {
return getJson(obj,"yyyy-MM-dd HH:mm:ss");
}
public static String getJson(Object obj, String dateFormat) throws JsonProcessingException {
ObjectMapper mapper = new ObjectMapper();
//关闭时间戳功能
mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
//设置格式
SimpleDateFormat sdf = new SimpleDateFormat(dateFormat);
mapper.setDateFormat(sdf);
return mapper.writeValueAsString(obj);
}
}
@RequestMapping("/time3")
@ResponseBody
public String json6() throws JsonProcessingException {
return JsonUtils.getJson(new Date());
}
2.Ajax
Ajax 即“AsynchronousJavascriptA**nd **XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
2.1使用Ajax
1.首先需要导入JQuery的文件
2.然后编写代码
文本框失去焦点后，判断文本框内容是否为admin，如果是弹出true，如果不是弹出false
<script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
function f() {
$.ajax({
url:"${pageContext.request.contextPath}/ajax/a1",
data:{'name':$("#value").val()},
success:function (data,status) {
alert(data);
alert(status);
}
});
}
</script>
</head>
<body>
<div>
用户名：<input type="text" id="value" onblur="f()">
</div>
</body>
@RequestMapping("/a1")
public void ajax1(String name, HttpServletResponse response) throws IOException {
if ("admin".equals(name)){
response.getWriter().write("true");
} else {
response.getWriter().write("false");
}
}
点击按钮获取后台返回集合
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$.post("${pageContext.request.contextPath}/ajax/a2",function (data) {
console.log(data);
var html = "";
for (var i = 0;i < data.length;i++){
html += "<tr>" +
"<td>" + data[i].username +"<td>" +
"<td>" +data[i].age +"<td>" +
"<tr>"
}
$("#content").html(html);
})
})
})
</script>
</head>
<body>
<div>
<input type="button" id="btn" value="获取数据">
</div>
<div>
<table width="80%" align="center">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tbody id="content">
</tbody>
</table>
</div>
</body>
@RequestMapping("/a2")
@ResponseBody
public List<User> ajax2() throws JsonProcessingException {
List<User> list = new ArrayList<>();
User user1 = new User("科比", 38);
User user2 = new User("科比", 38);
User user3 = new User("科比", 38);
User user4 = new User("科比", 38);
list.add(user1);
list.add(user2);
list.add(user3);
list.add(user4);
return list;//由于加了ResponseBody注解，这里将返回一个字符串
}
失去焦点判断登录用户名和密码
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
<script>
function a1() {
$.post({
url:"${pageContext.request.contextPath}/ajax/a3",
data:{"name":$("#name").val()},
success:function (data) {
if (data.toString()=='ok'){
$('#nameInfo').css("color","green");
} else {
$('#nameInfo').css("color","red");
}
$('#nameInfo').html(data);
}
})
}
function a2() {
$.post({
url:"${pageContext.request.contextPath}/ajax/a3",
data:{"pwd":$("#pwd").val()},
success:function (data) {
if (data.toString()=='ok'){
$('#pwdInfo').css("color","green");
} else {
$('#pwdInfo').css("color","red");
}
$('#pwdInfo').html(data);
}
})
}
</script>
</head>
<body>
<div>
用户名：
<input type="text" id="name" onblur="a1()">
<span id="nameInfo"></span>
</div>
<div>
密码：
<input type="text" id="pwd" onblur="a2()">
<span id="pwdInfo"></span>
</div>
</body>
@RequestMapping("/a3")
@ResponseBody
public String ajax3(String name,String pwd) throws JsonProcessingException {
String msg = null;
if (name!=null){
if (name.equals("admin")){
msg = "ok";
}else {
msg = "输入的用户名有误";
}
}
if (pwd!=null){
if (pwd.equals("123456")){
msg = "ok";
}else {
msg = "输入的密码有误";
}
}
return msg;
}
浙公网安备 33010602011771号