JSON和AJAX

最新推荐文章于 2024-04-25 23:25:03 发布

咕噜咕噜崩

最新推荐文章于 2024-04-25 23:25:03 发布

阅读量113

点赞数

分类专栏： JavaWeb 文章标签： java json ajax js

本文链接：https://blog.csdn.net/weixin_47251999/article/details/115640834

版权

JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JSON

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法，类似 XML。

JSON 比 XML 更小、更快，更易解析。

人话：就是一种数据交换格式

数据交换过程：

服务器端使用Gson()对象将数据转换为JSON样式的String
以String形式将数据发送到客户端
客户端将String数据解析成JSON对象后使用：JSON.parse(String数据)

客户端script中使用

json 是由键值对组成，并且由大括号包围。每个键由引号引起来，键和值之间使用冒号进行分隔，
多组键值对之间进行逗号进行分隔。

#创建
var jsonObj = {
"key1":12,
"key4":[11,"arr",false],
"key6":[{
"key6_1_1":6611},{"key6_1_2":"key6_1_2_value"}]};

#获取
alert(jsonObj.key1);

#常用方法
// 把 json 对象转换成为 json 字符串
var jsonObjString = JSON.stringify(jsonObj); // 特别像 Java 中对象的 toString

// 把 json 字符串。转换成为 json 对象
var jsonObj2 = JSON.parse(jsonObjString);

java端使用

<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.8.5</version>
    </dependency>

数据类型转换：

@Test
    public void jsonObj(){
        User user = new User("刘能", 58);
        Gson gson = new Gson();
        String json = gson.toJson(user);
        System.out.println(json);
        User user1 = gson.fromJson(json, User.class);
        System.out.println(user1);
    }

    @Test
    public void jsonList(){
        List<User> list = new ArrayList<>();
        list.add(new User("赵四",58));
        list.add(new User("刘能",88));
        Gson gson = new Gson();
        String json = gson.toJson(list);
        System.out.println(json);
        //注意List和Map需要TypeToken类匿名映射！
        List<User> list1 = gson.fromJson(json, (new TypeToken<List<User>>() {}).getType());
        System.out.println(list1);
    }

    @Test
    public void jsonMap(){
        Map<Integer,User> map = new HashMap<>();
        map.put(1,new User("赵四",58));
        map.put(2,new User("刘能",88));
        Gson gson = new Gson();
        String json = gson.toJson(map);
        System.out.println(json);
        Map<Integer,User> map2 = gson.fromJson(json, (new TypeToken<Map<Integer,User>>(){}).getType());
        System.out.println(map2);
    }

AJAX

Asynchronous Javascript And XML ==> 异步 JavaScript 和 XML

特点：

局部更新：地址栏不发生变化
异步请求：js发起请求后，程序会继续运行（不会等待数据返回，相当于Java的线程.start()）
服务器端不用转发或者重定向返回数据了，只需要write或OutputStream返回！！！

原始实战了解

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function ajax(){
            //创建文本请求对象 (以前是xml型数据,所以叫xml...)
            var xml = new XMLHttpRequest();
            //设置请求参数open(请求方式post/get 都用post,请求url,异步否 都是true)
            xml.open("get","/web1/ajax",true);
            //每当 readyState 改变时，就会触发 onreadystatechange 事件
            xml.onreadystatechange=function() {
                //readyState: 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
                //status: 200: "OK"  404: 未找到页面
                if (xml.readyState==4 && xml.status==200) {
                    var jsonObj = JSON.parse(xml.responseText);
                    document.getElementById("myTr").innerHTML="<td>"+jsonObj.name+"</td><td>"+jsonObj.age+"</td>";
                }
            }
            //发送请求
            xml.send();
        }
    </script>
</head>
<body>
<button id="myButton" onclick="ajax()">ajax</button>
<table>
    <tr><td>用户名</td><td>年龄</td></tr>
    <tr id="myTr"></tr>
</table>
</body>
</html>

照片错了：最常用方式是get方式
在这里插入图片描述

后端

在这里插入图片描述

真实开发（使用JQuery封装的Ajax）

在这里插入图片描述

后端代码一样，都是对象转为json字符串返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#myButton").click(function () {
            	//别看了 使用下面的get / post函数
                $.ajax({
                  url:"/web1/ajax",
                  data:"action=getJQueryAjax",
                  dataType:"json",
                  type:"get",
                  success:function (date) {
                      $("#myTr").html("<td>"+date.name+"</td><td>"+date.age+"</td>");
                  }
                });
            });
        })
    </script>
</head>
<body>
<button id="myButton">jQueryajax</button>
<table>
    <tr><td>用户名</td><td>年龄</td></tr>
    <tr id="myTr"></tr>
</table>
</body>
</html>

终于：
只要ajax不用处理异常时就是用下面的方式！！！

$("#get").click(function () {
    //$.get(url,data,成功回调函数callback,返回数据类型type)
    $.get("/web1/ajax","action=getJQueryAjax",function (date) {
        $("#myTr").html("<td>"+date.name+"</td><td>"+date.age+"</td>");
    },"json");
});

$("#post").click(function () {
    $.post("/web1/ajax","action=getJQueryAjax",function (date) {
        $("#myTr").html("<td>"+date.name+"</td><td>"+date.age+"</td>");
    },"json");
});

$("#getJSON").click(function () {
    //$.getJSON(url,data,callback)
    $.getJSON("/web1/ajax","action=getJQueryAjax",function (date) {
        $("#myTr").html("<td>"+date.name+"</td><td>"+date.age+"</td>");
    });
});

局部表单提交实现

思路：（使用ajax提交数据局部更新，替代表单自己的submit刷新页面）

JQuery获取表单serialize()实现数据序列化（name=value&name=value 的形式）
将序列化数据用AJAX请求（注意：getJSON的data部分要添加一个&！！！）

$("#mySubmit").click(function () {
    var data = $("#myForm").serialize();
    $.getJSON("/web1/ajax","action=getJQueryAjaxSerialize&"+data,function (date) {
        $("#myTr").html("<td>"+date.name+"</td><td>"+date.age+"</td>");
    });
});

重要技术突破

在这里插入图片描述

咕噜咕噜崩

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JSON和AJAX

JSONJSON: JavaScript Object Notation(JavaScript 对象表示法)JSON 是存储和交换文本信息的语法，类似 XML。JSON 比 XML 更小、更快，更易解析。人话：就是一种数据交换格式数据交换过程：服务器端使用Gson()对象将数据转换为JSON样式的String以String形式将数据发送到客户端客户端将String数据解析成JSON对象后使用：JSON.parse(String数据)客户端script中使用json 是由键值对组成，并
复制链接

扫一扫