一、JSON和AJAX

最新推荐文章于 2024-08-01 15:56:04 发布

Marvellous丶

最新推荐文章于 2024-08-01 15:56:04 发布

阅读量142

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/baolingye/article/details/98676853

版权

前端专栏收录该内容

12 篇文章 5 订阅

订阅专栏

一、JSON

JSON概述

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，目前使用特别广泛。

JSON采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JSON格式：

对象表示为键值对
数据由逗号分隔
花括号保存对象
方括号保存数组

JSON与Js对象的关系：JSON是Js对象的字符串表示法，使用文本表示一个Js对象信息，本质是一个字符串

JSON与JS对象的互相转换

JS对象转换为JSON字符串，使用JOSN.parse()方法
JSON字符串转换为JS对象，使用 JSON.stringify() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json1</title>
</head>
<body>
<script>
    var user = {
        name:"小学生",
        age:18,
        sex:"男"
    };
    //输出一下这个对象
    console.log(user);

    //将js对象转换为json字符串；
    var str = JSON.stringify(user);
    console.log(str) //

    //再将JSON字符串转换为JS对象
    var obj =  JSON.parse(str);
    console.log(obj);
</script>
</body>
</html>

运行结果：

在这里插入图片描述

使用Controller实现返回JSON数据

要使用Controller实现返回JSON数据，就需要一个JSON解析工具，我们这里使用Jackson，首先导入它的jar包

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

测试用到的实体类入下：

package org.westos.pojo;

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 + '\'' +
                '}';
    }
}

控制层需额外使用@ResponseBody注解和ObjectMapper的writeValueAsString方法将一个对象返回为JSON格式字符串：

@Controller
public class UserController {

    @RequestMapping("/json1")
    @ResponseBody
    public String json1() throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        User user = new User("张三", 23, "男");
        String str = mapper.writeValueAsString(user);
        return str;
    }
}

测试结果:

在这里插入图片描述

注意:建议在RequestMapping注解处设置编码类型，否则可能产生乱码,比如我这里可以这样设置：

@RequestMapping(value = "/json1",produces = "application/json;charset=utf-8")

但是如果项目中有多个请求要添加，这种在每个注解里添加参数的方法就比较麻烦，因此我们可以在Spring配置文件中统一制定编码，如下：

<context:component-scan base-package="org.westos.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"/>
                </bean>
            </property>
        </bean>
    </mvc:message-converters>
</mvc:annotation-driven>

使用JSON返回时间对象

直接返回默认的Date对象是1970年1月1日到现在的时间偏移量，Jackson 默认是转成timestamps形式，即默认情况下会返回一串数字（毫秒数），因此，要返回时间日期对象，需要先把Date的毫秒数转化为我们想要的字符串格式，我们这里直接将其抽取为一个工具类，可以有默认的字符串格式，也可以指定想要的时间日期格式

工具类：

package org.westos.utils;

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_Time {

    public static String getJson(Object object){
        return getJson(object,"yyyy-MM-dd hh:mm:ss");
    }

    public static String getJson(Object object,String dataFormat){
        ObjectMapper mapper = new ObjectMapper();
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat(dataFormat);
        String format = simpleDateFormat.format(object);
        //不使用时间差的方式
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
        try {
            return mapper.writeValueAsString(format);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return null;
    }
}

测试类：

因为工具类中已经定义了一直默认格式，所以这里直接传入一个Date对象即可将毫秒值转换为我们想要的字符串格式

@RequestMapping("/json3")
@ResponseBody
public String json3(){
    Date date = new Date();
    return JsonUtils_Time.getJson(date);
}

测试结果：
在这里插入图片描述

二、AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。而AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

jQuery 提供多个与 AJAX 有关的方法，通过 jQuery AJAX 方法，就能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON ，同时也能够把这些外部数据直接载入网页的被选元素中，下面列出了jQuery Ajax的方法：

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 将自动替换 ? 为正确的函数名，以执行回调函数

我们先使用最原始的HttpServletResponse处理 ,编写一个AjaxController，这里让给出一个输入框，当鼠标焦点点击框外时，会弹出请求返回的数据请求返回的状态

控制层

@Controller
public class AjaxController {
    @RequestMapping("/ajax1")
    public void ajax1(String name, HttpServletResponse response) throws IOException {
        if ("admin".equals(name)){
            response.getWriter().println("true");
        }else {
            response.getWriter().println("false");
        }
    }
}

xml

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <title>ajax</title>
    <script src="${pageContext.request.contextPath}/statics/jquery-3.4.1.js"></script>
    <script>
        /*
       jQuery.post(...)
       所有参数：
              url: 待载入页面的URL地址 (必填)
             data: 待发送 Key/value 参数
          success: 载入成功时回调函数
            data:请求返回的数据
            status：请求返回的状态
         */
        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/ajax1",
                data:{'name':$("#txtName").val()},
                success:function (data,status) {
                    alert(data);
                    alert(status);
                }
            });
        }

    </script>
</head>
<body>
<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="txtName" onblur="a1()"/>
</body>

这里再实现一个简单的登录注册页面的提示信息

控制层

@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; //由于@ResponseBody注解，将list转成json格式返回
}

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.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("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("#pwd").val()},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" οnblur="a1()"/>
    <span id="userInfo"></span>
</p>
<p>
    密码：
    <input type="text" id="pwd" οnblur="a2()"/>
    <span id="pwdInfo"></span>
</p>

</body>
</html>

我们这里将用户名默认设置为了admin，因此当鼠标焦点离开输入框后，输入框后就会提示是否正确
在这里插入图片描述