JSON&Ajax_ajax json请求-程序员宅基地

目录
一、基本介绍
 二、JSON格式
 三、JSON的使用
 1. JSON对象和JSON字符串的转换
 2. JSON在java中的使用
 四、Ajax的使用
 1. 基本介绍
 2. Ajax应用的场景
 3. 使用原生的javaScript发送Ajax请求
 3.1 创建XMLHttpRequest对象
 3.2 向服务器发送请求
 3.3 服务器响应
 3.4 处理服务器响应之后的请求
 4. 使用Jquery发送Ajax请求
 4.1 使用$.ajax()进行Ajax请求
 4.2 使用$.get()进行Ajax请求
 4.3 使用$.post()进行Ajax请求
 4.4 使用$.getJson()进行Ajax请求
 五、总结

一、基本介绍

JSON：JavaScript对象表示法（JavaScript Object Notation）。JSON是轻量级的文本呢数据交换格式。JSON并非只服务于某一个语言，而是像java、php、go等都可以使用JSON

二、JSON格式

var 变量名 = {
    
    "k1" : value, //Number类型
    "k2" : "value", //字符串类型
    "k3" : [], //数组类型
    "k4" : {
    }, //json对象类型
    "k5" : [{
    }{
    }] //json数组
}

提示：

映射(元素/属性)用冒号 : 表示，"名称":值 。注意名称是字符串，因此要用双引号引起来

并列的数据之间用逗号 , 分隔。“名称 1”:值,“名称 2”:值

映射的集合(对象)用大括号 {} 表示。{“名称 1”:值,“名称 2”:值}

并列数据的集合（数组）用方括号 [] 表示。 [{“名称 1”:值,“名称 2”:值}, {“名称 1”:值," 名称 2":值}]

元素值类型：string, number, object, array, true, false, null

示例：

var myJson = {
    
    "key1": "MyJson", // 字符串
    "key2": 123, // Number
    "key3": [1, "hello", 2.3], // 数组
    "key4": {
    "age": 12, "name": "jack"}, //json 对象
    "key5": [
    {
    "k1":10,"k2":"str"},
    {
    "k3":10,"k4":"str"}
    ] //json 数组
};

三、JSON的使用

这里先简单演示一下，快速入门

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示</title>
    <script type="text/javascript" src="../../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        var myJson = {
      
            "key1": "myJson", // 字符串
            "key2": 123, // Number
            "key3": [1, "hello", 2.3], // 数组
            "key4": {
      "age": 12, "name": "jack"}, //json 对象
            "key5": [] //json 数组
        };
        alert(myJson.key3);
    </script>
</head>
<body>
</body>
</html>

1. JSON对象和JSON字符串的转换

需要用到的方法

// 将一个json对象转换为json字符串
JSON.stringfiy(json对象)
// 将一个json字符串转换为json对象
JSON.parse(jsonString)

这里的JSON是一个内置对象，不需要创建。

上面两个方法的使用，都不会影响原来的 JSON对象/json字符串，而是返回一个新的转换后的变量。

在定义JSON对象的时候，可以使用单引号''表示字符串

在将原生的字符串转换为json对象的时候，必须使用双引号""，否则会报错。

、JSON.springify(json 对象) 返回的字符串, 都是用双引号""表示的字符串, 所以在语法格式正确的情况下, 是可以重新转成 json 对象的。

2. JSON在java中的使用

gson.jar包下载地址

java中使用JSON，需要引入第三方的gson.jar包。gson是Goole提供的用来在Java对象和JSON数据之间进行映射的java类库

示例

Student对象

package com.json;
/**
 * @author long
 * @date 2022/9/14
 */
public class Student {
    
    private int id;
    private int age;
    private String name;

    public Student(int id, int age, String name) {
    
        this.id = id;
        this.age = age;
        this.name = name;
    }

    public Student() {
    
    }

    public int getId() {
    
        return id;
    }

    public void setId(int id) {
    
        this.id = id;
    }

    public int getAge() {
    
        return age;
    }

    public void setAge(int age) {
    
        this.age = age;
    }

    public String getName() {
    
        return name;
    }

    public void setName(String name) {
    
        this.name = name;
    }

    @Override
    public String toString() {
    
        return "Student{" +
                "id=" + id +
                ", age=" + age +
                ", name='" + name + '\'' +
                '}';
    }
}

json字符串和java对象的相互转化

package com.json;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
/**
 * @author long
 * @date 2022/9/14
 */
public class MyJson{
    
    public static void main(String[] args) {
    
        
        Student student = new Student(1, 18, "张三");
        Gson gson = new Gson();
        // java对象转换为json字符串
        String studentStr = gson.toJson(student);
        System.out.println(studentStr);
        // json字符串转换为java对象
        Student student1 = gson.fromJson(studentStr, Student.class);
        System.out.println(student1);
    }
}

json字符串和java集合的相互转换

package com.json;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import java.util.ArrayList;
import java.util.List;

/**
 * @author long
 * @date 2022/9/14
 */
public class MyJson{
    
    static class StudentType extends TypeToken<List<Student>>{
    }
    public static void main(String[] args) {
    

        // List集合和json的相互转换
        List<Student> studentList = new ArrayList<>();
        studentList.add(new Student(2,18,"李四"));
        studentList.add(new Student(3,18,"王五"));
        // List转换为json字符串
        String listStr = gson.toJson(studentList);
        System.out.println(listStr);
        // json字符串转换为List（方式一）
        List<Student> studentList1= gson.fromJson(listStr, new StudentType().getType());
        System.out.println(studentList1);
        // json字符串转换为List（方式二:匿名内部类）
        List<Student> studentList2 = gson.fromJson(listStr, new TypeToken<List<Student>>() {
    
        }.getType());
        System.out.println(studentList2);

    }
}

package com.json;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import java.util.HashMap;
import java.util.Map;

/**
 * @author long
 * @date 2022/9/14
 */
public class MyJson{
    
    public static void main(String[] args) {
    

        // map集合和json的相互转换
        Map<String,Student> studentMap = new HashMap<>();
        studentMap.put("one",new Student(4,18,"张三"));
        studentMap.put("two",new Student(5,18,"张三"));
        // map转为json
        String studentMapStr = gson.toJson(studentMap);
        System.out.println(studentMapStr);
        // json转为map
        Map<String,Student> studentMap1 = gson.fromJson(studentMapStr, new TypeToken<HashMap<String, Book>>() {
    
        }.getType());
        System.out.println(studentMap1);
        
    }
}

四、Ajax的使用

1.基本介绍

Ajax：Asynchronous Javascript And XML(异步 JavaScript 和 XML)。Ajax是一种浏览器异步发起请求（指定发哪些数据），局部更新页面数据的技术。
异步发起请求：即我向后台发送了数据，但我的整个页面不会重新刷新（这样避免了每次都向后端发送很多重复的，无用的数据）

2.Ajax应用的场景

搜索引擎根据用户输入关键字，自动提示检索关键字
动态加载数据，按需取得数据【树形菜单、联动菜单…】
改善用户体验。【输入内容前提示、带进度条文件上传…】
电子商务应用。【购物车、邮件订阅…】

3.javaScript原生Ajax请求

首先我们简单的演示一下

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script type="text/javascript">
        window.onload = function () {
       //页面加载后执行function
            var checkButton = document.getElementById("checkButton");
            //给checkButton绑定onclick
            checkButton.onclick = function () {
      

                // 创建XMLHttpRequest对象(!!!) [ajax引擎对象]
                var xhr = new XMLHttpRequest();
                //   获取用户填写的用户名
                var uname = document.getElementById("uname").value;

                // 准备发送指定数据 open, send
                xhr.open("GET", "/ajax/checkUserServlet?uname=" + uname, true);

                // 每当 xhr对象readyState 改变时，就会触发 onreadystatechange 事件
                xhr.onreadystatechange = function () {
      
                    //如果请求已完成，且响应已就绪, 并且状态码是200
                    if (xhr.readyState == 4 && xhr.status == 200) {
      
                        //把返回的jon数据,显示在div
                        document.getElementById("div1").innerHTML = xhr.responseText;
                        var responseText = xhr.responseText;
                        if (responseText != "") {
      
                            document.getElementById("myres").value = "用户名不可用"
                        } else {
      
                            document.getElementById("myres").value = "用户名可用"
                        }
                    }
                }

                xhr.send();
            }
        }
    </script>
</head>
<body>
<h1>用户注册~</h1>
<form action="/ajax/checkUserServlet" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="checkButton" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>
</html>

使用步骤

3.1 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

3.2 向服务器发送请求

GET方式

xmlhttp.open("GET", "/ajax/checkUserServlet?uname=" + uname, true);
xmlhttp.send();

POST方式

xmlhttp.open("POST","/ajax/checkUserServlet",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("uname" + uname);

因为要异步请求，所以open()方法的第三个参数必须为true
POST请求发送表单数据的时候，需要将表单数据添加到send()的参数里
GET请求发送表单数据的时候，是将表单数据添加发送地址后边
上面的用例，表单数据发送到时候在url后边添加了?uname=，这相当于表单数据的name名称，所以Servlet获取参数的时候应该是String uname = request.getParameter("uname");

3.3 服务器响应

XMLHttpRequest有两个属性，用来获取响应的数据。

responseText：获得字符串形式的响应数据。
responseXML：获得XML形式的响应数据。

3.4 处理服务器返回的响应

xmlhttp.onreadystatechange=function()
{
    
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

XMLHttpRequest对象有三个属性：

onreadystatechange：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState：XMLHttpRequest的状态，共四种。

0：请求未初始化

1：服务器连接已建立

2：请求已接收

3：请求处理中

4：请求已完成，且响应已就绪

status：状态码

200：响应成功

404：未找到页面

4. jQuery的Ajax请求

4.1 使用$.ajax()进行Ajax请求

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
      
            //绑定事件
            $("#btn1").click(function () {
      
                //发出ajax
                $.ajax({
      
                    url: "/ajax/checkUserServlet2",
                    type: "POST",
                    data: {
       //这里我们直接给json传日期, 是为了浏览器缓存
                        username: $("#uname").val(),
                        date: new Date()
                    },
                    error: function () {
       //失败后的回调函数
                        console.log("失败~")
                    },
                    success: function (data, status, xhr) {
      
                        console.log("成功");
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        //data是json对象-> 显示转成json的字符串
                        $("#div1").html(JSON.stringify(data));
                        //对返回的结果进行处理
                        if ("" == data.username) {
      
                            $("#myres").val("该用户名可用");
                        } else {
      
                            $("#myres").val("该用户名不可用");
                        }
                    },
                    // dataType可以决定succes等回调函数处理数据的格式
                    dataType: "json"
                })

            })
        })
    </script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" id="submit" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>
</html>

回调函数有三个参数：

success(response,status,xhr)：

response - 包含来自请求的结果数据

status - 包含请求的状态

xhr - 包含 XMLHttpRequest 对象

4.2 使用$.get()进行Ajax请求

示例：

$.get(
                "/ajax/checkUserServlet",
                {
    
                    username: $("#uname").val(),
                    date: new Date()
                },
                function (data, status, xhr) {
    
                    console.log("$.get() 成功");
                    console.log("data=", data);
                    console.log("status=", status);
                    console.log("xhr=", xhr);
                    //data是json对象-> 显示转成json的字符串
                    $("#div1").html(JSON.stringify(data));
                    //对返回的结果进行处理
                    if ("" == data.username) {
    
                        $("#myres").val("该用户名可用");
                        } else {
    
                        $("#myres").val("该用户名不可用");
                    }
                },
                "json"
)

说明：

$.get() 默认是get请求，不需要指定请求方式

不需要指定参数名

填写的实参，是顺序 url, data, success回调函数, 返回的数据格式

4.3 使用$.post()进行Ajax请求

示例：
和$.get()的方式一样

$.post(
                    "/ajax/checkUserServlet",
                    {
    
                        username: $("#uname").val(),
                        date: new Date()
                    },
                    function (data, status, xhr) {
    
                        console.log("$.post() 成功");
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        //data是json对象-> 显示转成json的字符串
                        $("#div1").html(JSON.stringify(data));
                        //对返回的结果进行处理
                        if ("" == data.username) {
    
                            $("#myres").val("该用户名可用");
                        } else {
    
                            $("#myres").val("该用户名不可用");
                        }
                    },
                    "json"
)

4.4 使用$.getJson()进行Ajax请求

这个方式的Ajax请求必须是get请求，并且返回的数据格式必须是json

示例：

$.getJSON(
    "/ajax/checkUserServlet2",
    {
    
        username: $("#uname").val(),
        date: new Date()
    },
    function (data, status, xhr) {
    //成功后的回调函数
        console.log("$.getJSON 成功");
        console.log("data=", data);
        console.log("status=", status);
        console.log("xhr=", xhr);
        //data是json对象-> 显示转成json的字符串
        $("#div1").html(JSON.stringify(data));
        //对返回的结果进行处理
        if ("" == data.username) {
    
            $("#myres").val("该用户名可用");
        } else {
    
            $("#myres").val("该用户名不可用");
        }
    }
)

五、总结

以上就是我分享的关于Ajax和JSON的所有内容。讲解的不是很深入，适合于想快速上手的小伙伴！如果想要深入了解，大家可以去官网了解。

最后希望大家多多关注^_^，你们的关注是我不断前进的动力！！！
感谢感谢~~~

本文链接：https://blog.csdn.net/qq_35947021/article/details/126965377

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

while循环&CPU占用率高问题深入分析与解决方案_main函数使用while(1)循环cpu占用99-程序员宅基地

文章浏览阅读3.8k次，点赞9次，收藏28次。直接上一个工作中碰到的问题，另外一个系统开启多线程调用我这边的接口，然后我这边会开启多线程批量查询第三方接口并且返回给调用方。使用的是两三年前别人遗留下来的方法，放到线上后发现确实是可以正常取到结果，但是一旦调用，CPU占用就直接100%(部署环境是win server服务器)。因此查看了下相关的老代码并使用JProfiler查看发现是在某个while循环的时候有问题。具体项目代码就不贴了，类似于下面这段代码。while(flag) {//your code;}这里的flag._main函数使用while(1)循环cpu占用99

【无标题】jetbrains idea shift f6不生效_idea shift +f6快捷键不生效-程序员宅基地

文章浏览阅读347次。idea shift f6 快捷键无效_idea shift +f6快捷键不生效

node.js学习笔记之Node中的核心模块_node模块中有很多核心模块,以下不属于核心模块,使用时需下载的是-程序员宅基地

文章浏览阅读135次。Ecmacript 中没有DOM 和 BOM核心模块Node为JavaScript提供了很多服务器级别，这些API绝大多数都被包装到了一个具名和核心模块中了，例如文件操作的 fs 核心模块，http服务构建的http 模块 path 路径操作模块 os 操作系统信息模块// 用来获取机器信息的var os = require('os')// 用来操作路径的var path = require('path')// 获取当前机器的 CPU 信息console.log(os.cpus._node模块中有很多核心模块,以下不属于核心模块,使用时需下载的是

数学建模【SPSS 下载-安装、方差分析与回归分析的SPSS实现(软件概述、方差分析、回归分析)】_化工数学模型数据回归软件-程序员宅基地

文章浏览阅读10w+次，点赞435次，收藏3.4k次。SPSS 22 下载安装过程7.6 方差分析与回归分析的SPSS实现7.6.1 SPSS软件概述1 SPSS版本与安装2 SPSS界面3 SPSS特点4 SPSS数据7.6.2 SPSS与方差分析1 单因素方差分析2 双因素方差分析7.6.3 SPSS与回归分析SPSS回归分析过程牙膏价格问题的回归分析_化工数学模型数据回归软件

利用hutool实现邮件发送功能_hutool发送邮件-程序员宅基地

文章浏览阅读7.5k次。如何利用hutool工具包实现邮件发送功能呢？1、首先引入hutool依赖<dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.7.19</version></dependency>2、编写邮件发送工具类package com.pc.c..._hutool发送邮件

docker安装elasticsearch，elasticsearch-head，kibana，ik分词器_docker安装kibana连接elasticsearch并且elasticsearch有密码-程序员宅基地

文章浏览阅读867次，点赞2次，收藏2次。docker安装elasticsearch，elasticsearch-head，kibana，ik分词器安装方式基本有两种，一种是pull的方式，一种是Dockerfile的方式，由于pull的方式pull下来后还需配置许多东西且不便于复用，个人比较喜欢使用Dockerfile的方式所有docker支持的镜像基本都在https://hub.docker.com/docker的官网上能找到合..._docker安装kibana连接elasticsearch并且elasticsearch有密码

随便推点

Python 攻克移动开发失败！_beeware-程序员宅基地

文章浏览阅读1.3w次，点赞57次，收藏92次。整理 | 郑丽媛出品 | CSDN（ID：CSDNnews）近年来，随着机器学习的兴起，有一门编程语言逐渐变得火热——Python。得益于其针对机器学习提供了大量开源框架和第三方模块，内置..._beeware

Swift4.0_Timer 的基本使用_swift timer 暂停-程序员宅基地

文章浏览阅读7.9k次。//// ViewController.swift// Day_10_Timer//// Created by dongqiangfei on 2018/10/15.// Copyright 2018年飞飞. All rights reserved.//import UIKitclass ViewController: UIViewController { ..._swift timer 暂停

元素三大等待-程序员宅基地

文章浏览阅读986次，点赞2次，收藏2次。1.硬性等待让当前线程暂停执行，应用场景：代码执行速度太快了，但是UI元素没有立马加载出来，造成两者不同步，这时候就可以让代码等待一下，再去执行找元素的动作线程休眠，强制等待 Thread.sleep(long mills)package com.example.demo;import org.junit.jupiter.api.Test;import org.openqa.selenium.By;import org.openqa.selenium.firefox.Firefox.._元素三大等待