JSON
编写了一个html页面,将js中的对象转换为json格式,方法:var str=JSON.stringify(user);
又将json格式转换为js中的对象,方法:
var obj=JSON.parse(str);
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
//编写一个对象
var user={
name:"李白",
age:3,
sex:"男"
};
//输出一下user
console.log(user);
//将js的对象转换为json字符串
var str=JSON.stringify(user);
console.log(str);//{"name":"李白","age":3,"sex":"男"}
将json转换为js对象
var obj=JSON.parse(str);
console.log(obj);//Object { name: "李白", age: 3, sex: "男" }
</script>
</body>
</html>
在java中使用json
结构:
编写User对象
public class User {
private String name;
private int age;
private String sex;
public User() {
}
public User(String name, int age, String sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
@Override
public String toString() {
return "User{" +
"name='" + name + '\'' +
", age=" + age +
", sex='" + sex + '\'' +
'}';
}
springMVC.xml配置文件:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<!--扫描组件-->
<context:component-scan base-package="com.sophy.controller"/>
<mvc:default-servlet-handler/>
<mvc:annotation-driven>
<!--解决json字符串中文乱码问题-->
<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"></property>
</bean>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/"/>
<property name="suffix" value=".jsp"/>
</bean>
</beans>
web.xml配置文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1"
metadata-complete="true">
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<!--配置springMVC.xml的路径-->
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springMVC.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!--配置过滤器-->
<filter>
<filter-name>myFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>myFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
UserController类:
@Controller
public class UserController {
@RequestMapping(value = "/json1")
//思考问题,我们正常返回它会走视图解析器,而json需要返回的是一个字符串;
//市面上有很多的第三方jar包可以实现这个功能,jackson
//@ResponseBody,将服务器端返回的对象转换为json对象响应回去;
//@RequestBody
@ResponseBody
public String json1() throws JsonProcessingException {
//需要一个jackson对象映射器,就是一个类,使用它可以直接将对象转换为json字符串;
ObjectMapper mapper = new ObjectMapper();
//创建一个对象
User user = new User("李白", 1, "男");
System.out.println(user);
//将java对象转换为json对象
String string = mapper.writeValueAsString(user);
System.out.println(string);
return string;//由于使用了@ResponseBody注解,这里会将string以json格式的字符串返回,十分方便;
}
}
这里返回的json字符串会乱码
解决方法,在 @RequestMapping(value = “/json2”, produces = “application/json;charset=utf-8”)中加入参数和值
@RequestMapping(value = "/json2", produces = "application/json;charset=utf-8")
//思考问题,我们正常返回它会走视图解析器,而json需要返回的是一个字符串;
//市面上有很多的第三方jar包可以实现这个功能,jackson
//@ResponseBody,将服务器端返回的对象转换为json对象响应回去;
//@RequestBody
@ResponseBody
public String json2() throws JsonProcessingException {
//需要一个jackson对象映射器,就是一个类,使用它可以直接将对象转换为json字符串;
//创建一个对象
User user = new User("李白", 1, "男");
System.out.println(user);
//将java对象转换为json对象
return new ObjectMapper().writeValueAsString(user);
//由于使用了@ResponseBody注解,这里会将string以json格式的字符串返回,十分方便;
}
第二种解决json字符乱码的方式
在配置文件中加入:
springMVC.xml中加入:
<mvc:annotation-driven>
<!--解决json字符串中文乱码问题-->
<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"></property>
</bean>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
返回一个集合的字符串:
@RequestMapping(value = "/json3")
@ResponseBody
public String json3() throws JsonProcessingException {
//需要一个jackson对象映射器,就是一个类,使用它可以直接将对象转换为json字符串;
//创建一个对象
List<User> list = new ArrayList<>();
User user1 = new User("李白", 1, "男");
User user2 = new User("李白", 1, "男");
User user3 = new User("李白", 1, "男");
User user4 = new User("李白", 1, "男");
User user5 = new User("李白", 1, "男");
list.add(user1);
list.add(user2);
list.add(user3);
list.add(user4);
list.add(user5);
//将java对象转换为json对象
return new ObjectMapper().writeValueAsString(list);
//由于使用了@ResponseBody注解,这里会将string以json格式的字符串返回,十分方便;
}
获取时间
@RequestMapping(value = "/json4time")
@ResponseBody
public String json4() throws JsonProcessingException {
Date date = new Date();
System.out.println(date);
//发现问题:时候默认返回的json字符串变成了时候戳的格式:
return new ObjectMapper().writeValueAsString(date);
}
将时间转换为日期格式:
@RequestMapping(value = "/json4time1")
@ResponseBody
public String json5() throws JsonProcessingException {
ObjectMapper mapper = new ObjectMapper();
//1.如何让他不返回时间戳!所以我们要关闭时间戳功能
mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
//2.时间格式化问题!自定义日期格式对象;
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
//3.让mapper指定时间日期格式为simpleDateFormat;
mapper.setDateFormat(simpleDateFormat);
//写一个日期对象
Date date = new Date();
return mapper.writeValueAsString(date);
}
最后我们把日期格式的方法封装成为一个工具类:
JsonUtils
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import java.text.SimpleDateFormat;
public class JsonUtils {
public static String getJson(Object object){
return getJson(object,"yyyy-MM-dd HH:mm:ss");
}
public static String getJson(Object object,String dateFormat){
ObjectMapper mapper = new ObjectMapper();
//1.如何让他不返回时间戳!所以我们要关闭时间戳功能
mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
//2.时间格式化问题!自定义日期格式对象;
SimpleDateFormat simpleDateFormat = new SimpleDateFormat(dateFormat);
//3.让mapper指定时间日期格式为simpleDateFormat;
mapper.setDateFormat(simpleDateFormat);
try {
return mapper.writeValueAsString(object);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return null;
}
}
调用工具类:
@RequestMapping(value = "/json4time2")
@ResponseBody
public String json6() throws JsonProcessingException {
Date date = new Date();
return JsonUtils.getJson(date);
}
Ajax
AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)。
Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
c/s
增加B/S的体验性
B/S:未来的主流,并且会爆发式的持续增长;H5+网页+客户端+手机端(Android、IOS)+ 小程序
1.先导入包
伪造ajxa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪造Ajax</title>
</head>
<body>
<script type="text/javascript">
window.onload = function f() {
var myDate = new Date();
document.getElementById('currentTime').innerText=myDate.getTime();
}
function loadPage() {
var targetURL=document.getElementById('url').value;
console.log(targetURL);
document.getElementById('iframePosition').src=targetURL
}
</script>
<div>
<p>请输入要加载的地址:<span id="currentTime"></span></p>
<p>
<input type="text" id="url" value="https://blog.csdn.net/syq1791899128?spm=1018.2226.3001.5343">
<input type="button" value="提交" onclick="loadPage()">
</p>
</div>
<div>
<h3>
加载页面的位置:
</h3>
<iframe style="width: 100%;height: 500px " id="iframePosition"></iframe>
</div>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax</title>
<%--需要jquery,需要导入,注意点:路径问题--%>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js">
</script>
</head>
<body>
<script type="text/javascript">
function a1() {
// //所有参数;
// url:待载入页面的URL地址
// data:寿发送Key /value参数
// success:载入成功时回调函数
// dataType:返回内容格式,xml, json, script,text,html
//data: 封装了服务器返回的数据
//status:状态
//ajax默认是get请求
$.ajax({url:"${pageContext.request.contextPath}/ajax/a1",
data:{"name":$("txName").val()},
success:function (data,status){
console.log(data);
console.log(status)
}
});
import com.sophy.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletResponse;
import java.util.ArrayList;
import java.util.List;
@Controller
@RequestMapping("/ajax")
public class AjaxController {
//第一种方式服务器返回一个自字符串,直接使用response
@RequestMapping("/a1")
public void ajax(String name, HttpServletResponse response) throws Exception {
if ("admin".equals(name)){
response.getWriter().println("true");
}else {
response.getWriter().println("false");
}
}
@RequestMapping("/a2")
@ResponseBody
public List<User> ajax2() {
//创建一个对象
List<User> list = new ArrayList<>();
User user1 = new User("李白", 1, "男");
User user2 = new User("李白", 1, "男");
User user3 = new User("李白", 1, "男");
User user4 = new User("李白", 1, "男");
User user5 = new User("李白", 1, "男");
list.add(user1);
list.add(user2);
list.add(user3);
list.add(user4);
list.add(user5);
return list;//@ResponseBody注解。他会返回一个字符串;
}
@RequestMapping("/a3")
@ResponseBody
public String ajax3(String name,String pwd) {
String msg="";
if (name!=null){
if ("admin".equals(name)){
msg="ok";
}
else {
msg="用户名有误";
}
}
if (pwd!=null){
if ("123456".equals(pwd)){
msg="ok";
}else {
msg="密码输入错误";
}
}
return msg;
}
}
使用ajax实现密码活用户名错误时提示
<%--
Created by IntelliJ IDEA.
User: 月曦
Date: 2022/2/21
Time: 18:24
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<%--需要jquery,需要导入,注意点:路径问题--%>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script>
function a1() {
$.post({
url:"${pageContext.request.contextPath}/ajax/a3",
data:{"name":$("#name").val()},
success:function (data) {
if (data.toString()=="ok"){//信息核对成功
$('#userInfo').css("color","green");
}else {
$('#userInfo').css("color","red")
}
$("#userInfo").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>
<P>
用户名:
<input type="text" id="name" onblur="a1()"/>
<span id="userInfo"></span>
</P>
<P>
密码:
<input type="text" id="pwd" onblur="a2()"/>
<span id="pwdInfo"></span>
</P>
</body>
</html>
使用jQuery需要导入jQuery,使用Vue,导入Vue