前后台数据交互 | 我到哪里都是猪

JSON+Ajax

JSON

发布日期: 2020-04-18

阅读次数:

1、前后端分离时代

后端需要做的事情有：提供接口，提供数据；

问题来了：通过什么来传递数据？

正常的来说后台传数据都是通过对象，但是写前台的人有可能不懂什么是对象。
所以我们约定用json来传递数据（json用的最多）

前端：负责接收渲染后端的数据；

2、那么什么是JSON

JSON（JavaScript Object Notaion Js对象标记）是一种轻量级的数据交换格式，目前使用特别广泛。
采用完全独立于编程语言的文本格式来存储数据和表示数据。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript语言中，一切皆对象（var）。因此，任何
JavaScript支持的类型都可以通过JSON来表示，列如字符串、数字、对象、数组等。下面我们来看一下JSOn
要求的语法格式：

对象表示为键值对，数据由逗号分隔(“name”:”wen”)
花括号保存对象（{}）
中括号保存数组（[]）

3、如何使用JSON

编写script (这个是标签对，千万不能闭)

编写一个javaScript对象

var user={
          name:"wenbiao",
          age:"18",
          sex:"男"
      };

将js对象转换为json对象

var json=JSON.stringify(user);
console.log(json)

将json对象转换为JavaScript对象

var obj=JSON.parse(json);
console.log(obj);

最后可以通过obj.属性名获取到值，如下：
```
var c=obj.age;
console.log(c);
```

测试代码如下：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        //编写一个javaScript对象
        var user={
            name:"wenbiao",
            age:"18",
            sex:"男"
        };
        console.log(user);
        //将js对象转换为json对象
        var json=JSON.stringify(user);
        console.log(json)
        //将json对象转换为JavaScript对象
        var obj=JSON.parse(json);
        console.log(obj);
        var c=obj.age;
        console.log("===========================")
        console.log(c);
    </script>
</head>
<body>
<h2>Hello World!</h2>
</body>
</html>

4、java生成JSON对象返回给前端

Jackson应该是目前比较好的json解析工具。
当然工具不止这一个，比如还有阿里巴巴的fastjson等等。
这里测试的使用Jackson，使用它需要导入它的架包。

Jackson（架包地址）

什么东西都使用最新的（手动滑稽）

字符串以json的形式返回测试代码如下：

//@Controller
@RestController//只会返回字符串
public class UserController {
    @RequestMapping("/j1")
    @ResponseBody//只要加了这个就不会走视图解析器，会直接返回一个字符串
    public String json1() throws JsonProcessingException {
        //jackson ,ObjectMapper
        ObjectMapper mapper = new ObjectMapper();//（import com.fasterxml.jackson.core.JsonProcessingException;）
        User user = new User("wen",18,"男");
        String str = mapper.writeValueAsString(user);//把对象变成json格式
        return str;
    }
}

数组以json的形式返回测试代码如下

//@Controller
@RestController//只会返回字符串
public class UserController {
    @RequestMapping("/j2")
    public String json2() throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        List<User> list = new ArrayList<>();
        User user = new User("wen",18,"男");
        User user1 = new User("wen1",18,"男1");
        User user2 = new User("wen2",18,"男2");
        User user3 = new User("wen3",18,"男3");
        list.add(user);
        list.add(user1);
        list.add(user2);
        list.add(user3);
        String s = mapper.writeValueAsString(list);
        return s;
    }
}

时间类型

//@Controller
@RestController//只会返回字符串
public class UserController {
    @RequestMapping("/j3")
    public String json3() throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        Date date = new Date();
        // objectMapper,时间解析后的默认格式为：Timestamp，时间戳
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        return mapper.writeValueAsString(simpleDateFormat.format(date));
    }
}

FastJson

刚刚上面也提到过fastjson所以也简单的提一下

fastjson.jar是阿里开发的一款专门用于java开发的包，
可以方便的json对象于javaBean对象的转换，实现javaBean对象与json字符串的转换，实现json对象和json字符串的转换。

fastjson的pom依赖

<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.68</version>
</dependency>

fastjson三个主要的类

【JSONObject代表json对象】
【JSONArray代表json对象数组】
【JSON代表JSONObject和JSONArray的转换】

哎，看源码吧，中国式英语很好懂

5、Ajax

什么是ajax

AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML)。
AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页技术。
Ajax不是一种新的编程语言，而是一种用于创建更好更快以及语言交互性更强的Web应用程序和技术。

案例

html页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.0.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $.post("${pageContext.request.contextPath}/j5",function (date) {
                    console.log(date);
                    var html="";
                    for(let i=0;i<date.length;i++){
                        html+="<tr>"+
                            "<td>"+date[i].name+"<td>"+
                            "<td>"+date[i].age+"<td>"+
                            "<td>"+date[i].sex+"<td>"+
                            "/<tr>"
                    }
                    $("#content").html(html);
                });
            })
        });
    </script>
    <title>Title</title>
</head>
<body>
    <input type="button" value="加载数据" id="btn">
    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tbody id="content">
            <%--数据：后台--%>
        </tbody>
    </table>
</body>
</html>

pojo类

public class User {
    private String name;
    private int age;
    private String sex;
}

controller类

package com.controller;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import pojo.User;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

//@Controller
@RestController//下面的方法都会返回字符串
public class UserController {
    @RequestMapping("/j1")
    //@ResponseBody//只要加了这个就不会走视图解析器，会直接返回一个字符串
    @RequestMapping("/j5")
    public List<User> j5(){
        List<User> list = new ArrayList<>();
        User user = new User("wenbiao",18,"nan");
        User user1 = new User("wenbiao1",18,"nan");
        User user2 = new User("wenbiao2",18,"nan");
        User user3 = new User("wenbiao3",18,"nan");
        list.add(user);
        list.add(user1);
        list.add(user2);
        list.add(user3);
        return list;//（一定要返回字符串）
    }
}

总结：

前后端分离时代后台需要做的事情是传给前台一个json字符串
前台接收到后台传递过来的json数据进行处理然后显示

6、SpringMVC:拦截器

SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter，
用于对处理器进行预处理和后处理。开发者可以自己定义一些拦截器来实现特定的功能。

        过滤器于拦截器的区别：拦截器是AOP思想的具体应用。
        过滤器
         * servlet规范中的一部分，任何java web工程都可以使用
         * 在url-pattern中配置了/ *以后，可以对所有要访问的资源进行拦截
        拦截器
         * 拦截器是SpringMVC框架自己的，只有使用了SpringMVC框架工程才能使用
         * 拦截器只会拦截访问的控制器方法，如果访问的是jsp/html/css/img/js是不会进行拦截的

例子至上

上面说过拦截器是springMVC框架自己的所有不用导入架包，直接配置MvcServlet-servlet.xml

MvcServlet-servlet.xml配置

<mvc:interceptors><!--带s ，复数形式，说明可以在一个这个东西下面配置多个拦截器-->
        <bean class="com.interceptor.MyInterceptor"/><!--测试拦截器是否可以使用-->
    </mvc:interceptors>


    <mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/user/**"/><!--拦截user下面所有请求@RequestMapping("/user")-->
            <bean class="com.interceptor.LoginInterceptor"/>
        </mvc:interceptor>


        <mvc:interceptor>
            <mvc:mapping path="配置的路径"/>
            <bean class="拦截器的文件地址"/>
        </mvc:interceptor>
    </mvc:interceptors>

拦截器类（Interceptor）

package com.interceptor;

import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //登陆页面也可以放行
        if(request.getRequestURI().contains("goLogin")){
            return true;
        }
        //第一次登陆没有session，也要放行
        if(request.getRequestURI().contains("login")){
            return true;
        }
        //判断什么情况下什么登陆
        HttpSession session = request.getSession();
        if(session.getAttribute("userLoginInfo")!=null){
            return true;
        }

        request.getRequestDispatcher("/WEB-INF/jsp/login.jsp").forward(request,response);
        return false;
    }
}

login页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--在wen-info下的所有页面或者资源，只能通过controller，或者servlet进行访问--%>
<h1>登陆页面</h1>

<form action="${pageContext.request.contextPath}/user/login" method="post">
    用户名：<input type="text" name="username">
    密码：<input type="text" name="password">
    <input type="submit" value="提交">
</form>
</body>
</html>

mian页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <h1>首页</h1>
<span>${usernaem}</span>
<p>
    <a href="${pageContext.request.contextPath}/user/goOut">注销</a>
</p>
</body>
</html>

总结

拦截器是相对于springMVC框架来说的，所以只能在springMVC里面使用这个是重点！
拦截器是在程序运行前的时候做出拦截，然后你可以在里面做出你的判断，什么东西需要拦截，什么东西不要拦截

转载规则

《前后台数据交互》由我到哪里都是猪采用知识共享署名 4.0 国际许可协议进行许可。

ssm整合(入门)

SSM框架整合回顾了下Spring,SpringMVC,MyBatis框架整合，完善了一个小案例，包括基本的增删改查功能。环境要求 IDEA MySQL Tomcat Maven 需要熟练掌握MySQL数据库，Spring，Java

2020-04-27 ssm

框架

SpringMVC知识整合

SpringMVC

2020-04-13 SpringMVC

框架