2021-07-21 JSON与Ajax技术

最新推荐文章于 2022-04-29 08:56:10 发布

Rainbow.young

最新推荐文章于 2022-04-29 08:56:10 发布

阅读量296

点赞数

分类专栏： JAVA-WEB

本文链接：https://blog.csdn.net/weixin_44071524/article/details/118964107

版权

JAVA-WEB 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、JSON

1、什么是JSON

2、JSON与JavaScript对象转换

一、JSON

1、什么是JSON

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

在 JavaScript 语言中，一切都是对象。因此，任何JavaScript 支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。看看他的要求和语法格式：

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

JSON 键值对是用来保存 JavaScript 对象的一种方式，和 JavaScript 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 "" 包裹，使用冒号 : 分隔，然后紧接着值：

{"name": "Young"}
{"age": "3"}
{"sex": "男"}

2、JSON与JavaScript对象转换

            // json的定义
			var jsonObj = {
				"key1":12,
				"key2":"abc",
				"key3":true,
				"key4":[11,"arr",false],
				"key5":{
					"key5_1" : 551,
					"key5_2" : "key5_2_value"
				},
				"key6":[{
					"key6_1_1":6611,
					"key6_1_2":"key6_1_2_value"
				},{
					"key6_2_1":6621,
					"key6_2_2":"key6_2_2_value"
				}]
			};
            // 2. 把json对象转换成为 json字符串
			var jsonObjString = JSON.stringify(jsonObj); // 特别像 Java中对象的toString
			alert(jsonObjString);
			// 3. 把json字符串。转换成为json对象
			var jsonObj2 = JSON.parse(jsonObjString);

3、在类中测试返回json格式的bean

先导入依赖

// 2. 把json对象转换成为 json字符串
			var jsonObjString = JSON.stringify(jsonObj); // 特别像 Java中对象的toString
			alert(jsonObjString);
			// 3. 把json字符串。转换成为json对象
			var jsonObj2 = JSON.parse(jsonObjString);

spring中使用jackson统一解决乱码

<mvc:annotation-driven>
   <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>

实体类，用到了lombok

package com.kuang.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name;
    private int age;
    private String sex;
}

测试如下

一个bean对象的转换

package com.kuang.controller;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import com.kuang.pojo.User;
import com.kuang.utils.JsonUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

//@Controller
@RestController//程序返回字符串
public class UserController {

    @RequestMapping(value = "/j1")
//    @ResponseBody//只要加了此注解，程序就不会走视图解析器，会直接返回一个字符串，配合Controller使用
    public String json1() throws JsonProcessingException {
        //创建一个对象
        User user = new User("韩韩韩",22,"男");

        //jackson中主要的对象 ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        //此方法将bean对象转化为json格式字符串
        String s = mapper.writeValueAsString(user);
        return s;
    }

}

多个bean对象（集合）的转换

    @RequestMapping("/j2")
    public String json2() throws JsonProcessingException {
        //创建一个对象
        User user1 = new User("韩阳1号",22,"男");
        User user2 = new User("韩阳2号",22,"男");
        User user3 = new User("韩阳3号",22,"男");
        List<User> userList = new ArrayList<>();
        userList.add(user1);
        userList.add(user2);
        userList.add(user3);
        ObjectMapper mapper = new ObjectMapper();
        String s = mapper.writeValueAsString(userList);
        return s;
    }

返回一个时间对象

    @RequestMapping(value = "/j3")

    public String json3() throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        Date date1 = new Date();
        //返回一个时间戳，即1970年1月1日至今的毫秒数
        String s = mapper.writeValueAsString(date1);
    }

针对时间对象，将时间戳转换为指定格式

    @RequestMapping(value = "/j3")
//    @ResponseBody//只要加了此注解，程序就不会走视图解析器，会直接返回一个字符串，配合Controller使用
    public String json3() throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        //方式一：适合少量
//        Date date = new Date();
//
//        SimpleDateFormat sdf = new SimpleDateFormat();
//        //ObjectMapper,时间解析后默认格式为时间戳:timestamp 即1970年1月1日到当前的ms数
//        return mapper.writeValueAsString(sdf.format(date));

        //方式二：大量
        mapper.configure(SerializationFeature.WRITE_DATE_KEYS_AS_TIMESTAMPS,false);
        //自定义日期格式
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        mapper.setDateFormat(sdf);
        Date date = new Date();
        return mapper.writeValueAsString(date);
    }

注意：

@ResponseBody---加在方法上，只要加了此注解，程序就不会走视图解析器，会直接返回一个字符串，配合@Controller使用
@RestController---加在类上，下面方法返回字符串，比上述方便

二、AJAX

基于JQuery的ajax技术

1、什么是AJAX

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

2、JQuery中的ajax请求

JQuery中有4个和ajax有关的方法

①$.ajax

语法：

jQuery.ajax([settings])

参数

*url：请求的地址

类型：String

默认值: 当前页地址。发送请求的地址。

*type : 请求的方式 get 或 post

类型：String

默认值: "GET")。请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

*data : 请求的参数 string 或 json

类型：String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

*success: 成功的回调函数

类型：Function

请求成功后的回调函数。

参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

这是一个 Ajax 事件。

*dataType: 返回的数据类型常用 json或 text

类型：String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串

为id为ajaxBtn的按钮绑定一个ajax请求

$("#ajaxBtn").click(function(){
					$.ajax({
						url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
						//data:"action=jQueryAjax",
						data:{action:"jQueryAjax"},
						type:"GET",
                            //回调函数中要加上一个参数data，即为返回的数据
						success:function (data) {
							// alert("服务器返回的数据是：" + data);
							// var jsonObj = JSON.parse(data);
							$("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);
						},
						dataType : "json"
					});
				});

servlet程序

注：此处并没有使用jackson而是gson，效果相同

    protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("JqueryAjax方法调用了");
        Person person = new Person(1, "Hany666牛牛牛");
        //转为json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        resp.getWriter().write(personJsonString);
    }

②$.get 请求和$.post请求

语法：

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数

url:请求的 URL 地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text。

定义和用法：

定义和用法

post()/get() 方法通过 HTTP POST /GET请求从服务器载入数据。

// ajax--get请求
				$("#getBtn").click(function(){

					$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
						$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
					},"json");
					
				});

				// ajax--post请求
				$("#postBtn").click(function(){
					// post请求
					$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {
						$("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
					},"json");
					
				});

servlet程序

    protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("jQueryGet方法调用了");
        Person person = new Person(1, "Hanyang666牛牛牛");
        //转为json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        resp.getWriter().write(personJsonString);
    }

    protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("jQueryPost方法调用了");
        Person person = new Person(1, "Hanyang666牛牛牛");
        //转为json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        resp.getWriter().write(personJsonString);
    }

③getJSON

语法：

jQuery.getJSON(url,data,success(data,status,xhr))

参数

url:请求的 URL 地址

data:待发送 Key/value 参数。

success:载入成功时回调函数。

定义和用法

通过 HTTP GET 请求载入 JSON 数据。

// ajax--getJson请求
				$("#getJSONBtn").click(function(){
					$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) {
						$("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
					});
				});

servlet程序

    protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("jQueryGetJSON方法调用了");
        Person person = new Person(1, "Hanyang666牛牛牛");
        //转为json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        resp.getWriter().write(personJsonString);
    }

④扩展

表单的序列化

serialize() 方法可以把一个 form 表单中所有的表单项。都以字符串 name=value&name=value 的形式进行拼接，省去我们很多不必要的工作。

如下data参数中：取出id为form01表单中的数据调用serialize()方法拼接

// ajax请求
				$("#submit").click(function(){
					// 把参数序列化
					$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
						$("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
					});
				});

    protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("jQuerySerialize方法调用了");
        Person person = new Person(1, "Hanyang666牛牛牛");
        //转为json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        resp.getWriter().write(personJsonString);
    }

注意，拼接成功的字符串没有第一个&符