Java web - JSON和AJAX - 《Java 后端自学之路》

Json
Ajax

Json

<!-- jackson -->
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-databind</artifactId>
  <version>2.9.8</version>
</dependency>

<?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-4.2.xsd
        http://www.springframework.org/schema/context
        https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!--扫描controller-->
    <context:component-scan base-package="cn.dafran.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.Jackson2ObjectMapperFactoryBean">
                <property name="failOnEmptyBeans" value="false"/>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
    <!--配置视图解析器 ,会在controller中方法的返回值上加上前后缀-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
        <property name="prefix" value="/"/>  <!--前缀-->
        <property name="suffix" value=".jsp"/>   <!--后缀-->
    </bean>
</beans>

package cn.dafran.utils;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import java.text.SimpleDateFormat;
/**
 * @author Administrator
 * @Classname JsonUtils
 * @Description TODO
 * @Date 2020-10-30 22:00
 * @Version V1.0
 */
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 sdf = new SimpleDateFormat(dateFormat);
        //3、让mapper指定时间日期格式为simpleDate.Format;
        mapper.setDateFormat(sdf);
        try {
            return mapper.writeValueAsString(object);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return null;
    }
}

package cn.dafran.controller;
import cn.dafran.pojo.User;
import cn.dafran.utils.JsonUtils;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.io.Serializable;
import java.text.SimpleDateFormat;
import java.util.Date;
/**
 * @author Administrator
 * @Classname UserController
 * @Description TODO
 * @Date 2020-10-30 18:36
 * @Version V1.0
 */
@Controller
public class UserController {
    @RequestMapping("/json1")
    //思考问题,我们正常返回他会定视图解析器,json需要返回的是一个子符串;
    //市面上有很多的第三方jar包可以实现这个功能,jackson、fastjson：阿里巴巴
    //                  只需要一-个简单的注解就可以实现了;
    //@ResponseBody 将服务器端返回的对象转换为json对象响应回去;
    //@RequestBody 一般用来负责接收前台的json数据,把json数据自动封装到pojo中
    @ResponseBody
    public String json1() throws JsonProcessingException {
        //需要一个jackson的对象映射器,就是一个类，使用它可以将对象转换成json字符串
        ObjectMapper mapper = new ObjectMapper();
        //创建一个对象
        User user = new User("dafran", 1, "男");
        System.out.println(user);
        //将Java对象转换成json字符串
        String str = mapper.writeValueAsString(user);
        System.out.println(str);
        return str;
        //由于使用TResponseBody注解， 这里会将str以json格式的字符串返回，十分方便;
    }
    //发现一个问题， 乱码了，怎么解决?给@RequestMapping加一个属性
    //发现出现了乱码问题，我们需要设置一下他的编码格式为utf-8，以及它返回的类型;
    //通过@RequestMaping 的produces属性来实现，修改下代码\
    //produces:指定响应体返回类型和编码
    @RequestMapping(value = "/json2",produces = "application/json;charset=utf-8")
    @ResponseBody
    public String json2() throws JsonProcessingException {
        return new ObjectMapper().writeValueAsString(new User("dafran",1,"男"));
    }
    @RequestMapping(value = "/time1")
    @ResponseBody
    public String json3() throws JsonProcessingException {
        Date date = new Date();
        System.out.println(date);
        //发现问题:时间默认返回的json字符串变成了时间戳的格式,Timestamp
        return new ObjectMapper().writeValueAsString(date);
    }
    @RequestMapping(value = "/time2")
    @ResponseBody
    public String json4() throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        //1、如何让他不返回时间戳!所以我们要关闭它的时间戳功能
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
        //2、时间格式化问题!自定日期格式对象;
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        //3、让mapper指定时间日期格式为simpleDate.Format;
        mapper.setDateFormat(sdf);
        //写一个日期对象
        Date date = new Date();
        return mapper.writeValueAsString(date);
    }
    //发现问题，重复代码太多，给它编写一个工具类;
    @RequestMapping(value = "/time3")
    @ResponseBody
    public String json5() throws JsonProcessingException {
        // 写一个日期对象
        return JsonUtils.getJson(new Date());
    }
}

Ajax

AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML)。

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<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://www.bilibili.com/video/BV1Kt411u7BV">
        <input type="button" value="提交" onclick="loadPage()">
    </p>
</div>
<div>
    <h3>
        加载页面位置
    </h3>
    <iframe style="width: 100%;height: 500px" id="iframePosition">
    </iframe>
</div>
</body>
</html>

纯JS实现Ajax我们不去讲解这里，直接使用jquery提供的，更方便学习，避免重复造轮子，有兴趣的同学可以去了解下本质XMLHttpRequest !
Ajax的核心是XMLHttpRequest对象(XHR)。 XHR为向服务器发送请求和解析服务器响应提供了接口。能够以
异步方式从服务器获取新数据。
jQuery提供多个与AJAX有关的方法。
通过jQuery AJAX方法，您能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或
JSON一同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery不是生产者，而是大自然搬运工。
jQuery Ajax本质就是XMLHttpRequest, 对他进行了封装，方便调用!我们来看下他的方法;

1. jQuery.get(...)
    所有参数:
        url:待载入页面的URL地址
        data:待发送Key/value参数。
        success:载入成功时回调函数。
        dataType:返回内容格式，xml, json, script, text, html
2. jQuery.post(...)
    所有参数:
        url:待载入页面的URL地址
        data:待发送Key/value参数。
        success:载入成功时回调函数。
        dataType:返回内容格式，xml, json, script, text, html
3. jQuery.getJSON(...)
    所有参数:
        url:待载入页面的URL地址
        data:待发送Key/value参数。
        success:载入成功时回调函数。
4.jQuery.getScript(. ..)
    所有参数:
        url:待载入页面的URL地址
        data:待发送Key/value参数。
        success:载入成功时回调函数。
5. 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 将自动替换?为正确的函数名以执行回调函数

Ajax总结:
使用jQuery需要导入jQuery,使用Vue导入Vue,两个都用，自己原生态实现

三步曲:
1.编写对应处理的Controller ,返回消息或者字符串或者json格式的数据;
2.编写ajax请求

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

3.给Ajax绑定事件，点击.click, 失去焦点onblur,键盘弹起keyup