Ajax与Json

JSON

json用法

JSON是一种取代XML的数据结构，和xml相比，它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度。

JSON就是一串字符串 只不过元素会使用特定的符号标注。

{} 双括号表示对象

[] 中括号表示数组

“” 双引号内是属性或值

冒号表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象)

前后端分离，数据交互变得异常重要；JSON就是王者

Jackson

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.12.2</version>
</dependency>

正常返回他会走视图解析器，而json需要返回的是一个字符串；

Public class UserController{
@RequestMappering("/")   //前端文件
//思考问题，我们正常返回他会走视图解析器，而json需要返回的是一个字符串;
//市面上有很多的第三方jar包可以实现这个功能，jackson.只需要一个简单的注解就可以实现了;
//@ResponseBody ,将服务器端返回的对象转换为json对象响应回去;

@ResponseBody
public string json1( ) throws JsonProcessingException {
    
//需要一个jackson的对象映射器，就是一个类，使用它可以直接将对象转换json字符串;
    objectMapper mapper = new objectMapper();
    
//创建一个对象
   User user = new lser( name:"前度" , age:1, sex:"男");
    
//将Java对象转换为json字符串;
    String str = mapper.writevalueAsstring(user);
    
    return str;
//由于使用了@ResponseBody注解，这里会将str以json格式的字符串返回，十分方便;
   }
}

简洁写法：

@RequestMappering("/")   //前端文件
@ResponseBody
public string json1( ) throws JsonProcessingException {
    
    User user = new lser( name:"前度" , age:1, sex:"男");
   
    return new objectMapper().writevalueAsstring(user);
}

上面代码运行会有乱码 解决方法：

• 第一种方法：
  返回Json数据时浏览器出现了中文乱码，给@RequestMapping加一个produces属性,设置它的返回类型，以及编码格式为utf-8
  produces 指定响应体返回类型和编码

@RequestMappering("/" , produces = "application/json;charset=utf-8")

• 在springmvc.xml配置文件中配置

<!-- mvc驱动注解 -->
<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>

例子2

Date date = new Date();
return new objectMapper().writevalueAsstring(date);

时间默认返回的json字符串变成了时间戳的格式:Timestamp。

objectMapper mapper = new objectMapper() ；
//l.如何让他不返回时间戳!所以我们要关闭它的时间戳功能
mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS , false);
//2.时间格式化问题!自定日期格式对象;   
simpleDateFormat sdf = new simpleDateFormat( patern: "yyyy-MM-dd HH:mm:ss");
//让mapper指定时间格式为 simpleDateFormat
mapper.setDateFormat(sdf) ;
//写一个日期对象
Date date = new Date();
return mapper.writevalueAsstring(date);

---

封装JSON

重复代码太多，编写一个工具类

包名 ：utils 类： JsonUtils

public class  JsonUtils(){
    
    public static String getJson(Object object,String dateFormat){     
       objectMapper mapper = new objectMapper() ；
		//l.如何让他不返回时间戳!所以我们要关闭它的时间戳功能
	   mapper.configure(SerializationFeature.WRITEObject object_DATES_AS_TIMESTAMPS , false);
		//2.时间格式化问题!自定日期格式对象;   
	   simpleDateFormat sdf = new simpleDateFormat(dateFormat );
        //dateFormat: "yyyy-MM-dd HH:mm:ss"
		//让mapper指定时间格式为 simpleDateFormat
		mapper.setDateFormat(sdf) ;

        try{
			return mapper.writevalueAsstring(object); 
        }  catch( sonProcessingException e ){
           e.frintstackTrace();
        }
        return null;      
    }
  //------------------------------重载--------------------------------
     public static String getJson(Object object）{
      
         return getJson(Object object,"yyyy-MM-dd HH:mm:ss");         
     }
   
}

---

---

AJAX

ajax的用法

Ajax即 Asynchronous Javascript And XML（异步JavaScript和XML）

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

区别

• 传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
• 使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

B/S ：未来的主流，爆发式持续增长

优点

• 注册时，输入用户名自动检测用户是否已经存在。登陆时，提示用户名密码错误
• 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
• 我们可以使用前端的一个标签来伪造一个ajax的样子。iframe标签

举例

我们可以使用前端的一个标签来伪造一个ajax的样子。iframe标签

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>伪造Ajax</title>
</head>

<body>
    <script type="text/javascript">
        function loadPage() {
            var targetURL = document.getElementById('url').value;
            console.log(targetURL);
            document.getElementById('iframePosition').src = targetURL;
        }
    </script>

    <div>
        <p>请输入要加载的地址：</p>
        <P>
            <input type="text" id="url" value="">
            <input type="button" value="提交 " onclick="loadPage()">
        </P>
    </div>

    <div>
        <h3>加载页面的位置</h3>
        <iframe src="" frameborder="1" style="width: 100%;height: 600px;" id="iframePosition">
        </iframe>
    </div>

</body>
</html>

利用Jquery实现异步 （登录例子）

• java

• 页面

• Ajax

封装Ajax

Ajax总结

使用jQuery需要导入JQuery，使用layui需要导入layui

三步曲

1. 编写对应的处理Controller，返回消息或者字符串或者json格式的数据

2. 编写ajax请求

   • url ： Controller请求
   • data ： 键值对
   • success ：回调函数

3. 给ajax绑定事件，比如 点击（click），失去焦点（onblur），键盘弹起（keyup）

 $.post({
    url: "",
    data: { "属性": "值" },   //$("id").val()
    success: function (data, status) {   
     //成功回调函数  data封装了服务器返回的数据   status 返回状态
    console.log(data);
    console.log(status);
 }
})

---

结束~~