菜单 搜索
首页 前端知识 JSON、Ajax

JSON、Ajax

2024-07-27 22:07:31 前端知识 前端哥 830 600 我要收藏

Day43

JSON

简介：
JSON：JavaScript Object Notation是一种表示对象的方式
基于JavaScript语言的轻量级的数据交换格式;（即:用来传输数据的一种格式）
现在传输数据都是用的JSON格式，渐渐替代了xml格式。

xml格式和JSON格式的优缺点：

同样的数据量，JSON格式占用空间更少，但是JSON可读性较差。

XML可读性高，一般用作配置文件，但是同样的数据量，XML格式占用空间更多。

注意：客户端和服务端交互，传输的XML格式或者JSON格式都是字符串！

掌握的技能就是在客户端和服务端生成和解析JSON格式的字符串。

客户端中处理JSON

解析JSON -> JS对象

<body>
		
		<script type="text/javascript">
			//var jsonStr = '{"name":"张三","age":18}';
			//var jsObj = JSON.parse(jsonStr);
			//console.log(jsObj.name);
			//console.log(jsObj.age);
			
			
			var jsonStr = '{"name":"张三","age":18}';
			var jsObj = eval("("+jsonStr+")");
			console.log(jsObj.name);
			console.log(jsObj.age);
			
		</script>
	</body>
复制

注：必须单引号包裹双引号，key必须使用双引号包裹。建议：使用eval（）：将字符串认为是JS代码去执行，但由于JSON是以“{}”的方式开始以及结束的，会被当做代码块，所以要加上小括号让它去理解并解析。

解析JSON格式的字符串 ->JS数组

<body>
		
		<script type="text/javascript">
				
			var jsonStrs = "[{'name':'张三','age':18},{'name':'李四','age':24}]";
			var jsArr = eval(jsonStrs);
			for (var i=0;i<jsArr.length;i++) {
				console.log(jsArr[i].name);
				console.log(jsArr[i].age);
			}
			
			
		</script>
	</body>
复制

注：因为数组外面是中括号，所以eval方法里不用再加小括号。

JS对象 -> 解析成JSON格式的字符串

<body>
		
		<script type="text/javascript">
				
			function Student(name,age){
				this.name = name;
				this.age = age;
			}
			var stuObj1 = new Student("张三",18);
			var jsonStr = JSON.stringify(stuObj1);
			console.log(jsonStr);
			
		</script>
	</body>
复制

注：JSON.stringify（obj）方法。

JS数组 -> 解析成JSON格式的字符串

<body>
		
		<script type="text/javascript">
				
			function Student(name,age){
				this.name = name;
				this.age = age;
			}
			var stuObj1 = new Student("张三",18);
			var stuObj2 = new Student("李四",19);
			var stus = [stuObj1,stuObj2];
			var jsonStr = JSON.stringify(stus);
			console.log(jsonStr);
			
			
			
		</script>
	</body>
复制

服务端（Java）中处理JSON

如果使用逻辑或Java原生解析类去解析JSON是非常麻烦的，项目中大多数会使用FastJSON和Jackson来操作JSON

FastJSON

特点：

名声大（阿里制作），速度快，功能强大，零依赖。

创建resources包，设为资源，放入fastjson的jar包，导包。

场景：

Author：

package com.qf;
 
public class Author {
    private String name;
    private String info;
 
    public Author() {
    }
 
    public Author(String name, String info) {
        this.name = name;
        this.info = info;
    }
 
    public String getName() {
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }
 
    public String getInfo() {
        return info;
    }
 
    public void setInfo(String info) {
        this.info = info;
    }
 
    @Override
    public String toString() {
        return "Author{" +
                "name='" + name + '\'' +
                ", info='" + info + '\'' +
                '}';
    }
}
 
复制

Book:

package com.qf;
 
public class Book {
    private String name;
    private double price;
    private Author author;
 
    public Book() {
    }
 
    public Book(String name, double price, Author author) {
        this.name = name;
        this.price = price;
        this.author = author;
    }
 
    public String getName() {
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }
 
    public double getPrice() {
        return price;
    }
 
    public void setPrice(double price) {
        this.price = price;
    }
 
    public Author getAuthor() {
        return author;
    }
 
    public void setAuthor(Author author) {
        this.author = author;
    }
 
    @Override
    public String toString() {
        return "Book{" +
                "name='" + name + '\'' +
                ", price=" + price +
                ", author=" + author +
                '}';
    }
}
 
复制

JSON字符串转Java对象

public static void main(String[] args) {
        String jsonStr = "{name:'Java从入门到精通',price:100,author:{name:'张三',info:'从业Java20年'}}";
        Book book = JSON.parseObject(jsonStr, Book.class);
        System.out.println(book);
    }
复制

JSON字符串转Java数组

public static void main(String[] args) {
        String jsonStr = "[{name:'Java从入门到精通',price:100,author:{name:'张三',info:'从业Java20年'}},{name:'Sql从删库到跑路',price:999,author:{name:'李四',info:'精通数据库的安装和卸载'}}]";
        //将JSON格式的字符串转换为JSONArray对象
        JSONArray jsonArray = JSONArray.parseArray(jsonStr);
        //创建Java数组
        Book[] books = new Book[jsonArray.size()];
        //遍历jsonArray，将里面的元素（JSONObject）取出并转换为Java对象
        for (int i = 0; i < jsonArray.size(); i++) {
            Book book = jsonArray.getObject(i, Book.class);
            books[i] = book;
        }
        for (Book book : books) {
            System.out.println(book);
        }
    }
复制

JSON字符串转Java的List集合

public class Test03 {
    public static void main(String[] args) {
        String jsonStr = "[{name:'Java从入门到精通',price:100,author:{name:'张三',info:'从业Java20年'}},{name:'Sql从删库到跑路',price:999,author:{name:'李四',info:'精通数据库的安装和卸载'}}]";
        //将JSON格式的字符串转换为集合对象
        List<Book> books = JSONArray.parseArray(jsonStr, Book.class);
        for (Book book : books) {
            System.out.println(book);
        }
    }
}
复制

经验：不转为数组，转为集合，更简便。

JSON字符串转Java的Map集合

public static void main(String[] args) {
        String jsonStr = "{'001':{name:'Java从入门到精通',price:100,author:{name:'张三',info:'从业Java20年'}},'002':{name:'Sql从删库到跑路',price:999,author:{name:'李四',info:'精通数据库的安装和卸载'}}}";
        HashMap<String, Book> bookMap = new HashMap<>();
        //将JSON格式的字符串转换为Map集合对象
        Map<String, JSONObject> map = (Map<String, JSONObject>) JSON.parse(jsonStr);
        Set<Map.Entry<String, JSONObject>> entries = map.entrySet();
        for (Map.Entry<String, JSONObject> entry : entries) {
            String key = entry.getKey();
            JSONObject value = entry.getValue();
            //将JSONObject对象转换为Book对象
            Book book = JSONObject.toJavaObject(value, Book.class);
            bookMap.put(key,book);
        }
        Set<Map.Entry<String, Book>> bookEntries = bookMap.entrySet();
        for (Map.Entry<String, Book> bookEntry : bookEntries) {
            System.out.println(bookEntry.getKey()+"--"+bookEntry.getValue());
        }
    }
复制

Java对象转JSON格式字符串

public static void main(String[] args) {
        Author author = new Author("张三", "精通Java的安装与下载");
        Book book = new Book("Java从入门到精通", 999, author);
        //Java对象 转 JSON字符串
 
        String jsonStr0 = JSON.toJSONString(book);
        System.out.println(jsonStr0);
    }
复制

添加过滤器：

public static void main(String[] args) {
        Author author = new Author("张三", "精通Java的安装与下载");
        Book book = new Book("Java从入门到精通", 999, author);
        //Java对象 转 JSON字符串
 
//        String jsonStr0 = JSON.toJSONString(book);
//        System.out.println(jsonStr0);
 
 
        String jsonStr = JSON.toJSONString(book, new PropertyFilter() {
            @Override
            public boolean apply(Object o, String s, Object o1) {
                if (o instanceof Author && s.equals("name")) {
                    return false;
                }
                return true;
            }
        });
        System.out.println(jsonStr);
    }
复制

Java数组转JSON格式字符串

public static void main(String[] args) {
        Author author1 = new Author("张三", "精通Java的安装与下载");
        Book book1 = new Book("Java从入门到精通", 999, author1);
        Author author2 = new Author("李四", "精通MySql的安装与下载");
        Book book2 = new Book("MySql从删库到跑路", 999, author2);
        Book[] books = new Book[]{book1,book2};
        String jsonString = JSON.toJSONString(books);
        System.out.println(jsonString);
    }
复制

Java的List集合转JSON格式字符串

public static void main(String[] args) {
        Author author1 = new Author("张三", "精通Java的安装与下载");
        Book book1 = new Book("Java从入门到精通", 999, author1);
        Author author2 = new Author("李四", "精通MySql的安装与下载");
        Book book2 = new Book("MySql从删库到跑路", 999, author2);
        List<Book> books = Arrays.asList(book1,book2);
        String jsonString = JSON.toJSONString(books);
        System.out.println(jsonString);
    }
复制

Java的Map集合转JSON格式字符串

public static void main(String[] args) {
        Author author1 = new Author("张三", "精通Java的安装与下载");
        Book book1 = new Book("Java从入门到精通", 999, author1);
        Author author2 = new Author("李四", "精通MySql的安装与下载");
        Book book2 = new Book("MySql从删库到跑路", 999, author2);
        Map<String,Book> map = new HashMap<>();
        map.put("001",book1);
        map.put("002",book2);
        String jsonString = JSON.toJSONString(map);
        System.out.println(jsonString);
    }
复制

Ajax

简介：Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML

他不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法

Ajax指的是刷新局部页面的技术。

XMLHttpRequest对象

该对象用于在前台与服务器交换数据。即对网页进行局部更新，除了IE5和IE6使用ActiveXObject外所有现代浏览器均支持XMLHttpRequest对象。

//获取XMLHttpRequest对象
function getXMLHttpRequest() {
	var xmlHttp;
	if (window.XMLHttpRequest) {// 新浏览器
		xmlHttp = new XMLHttpRequest();
	}else if (window. ActiveXObject) {// IE6及以下浏览器
		xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP");
	}
	return xmlHttp;
}
复制

与服务器交换数据-open/send

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
    <button οnclick="fun01()">向Servlet01发送请求</button>
    <button οnclick="fun02()">向Servlet02发送请求</button>
 
  </body>
 
 
  <script type="text/javascript">
    function fun01(){
      var xmlHttp = getXMLHttpRequest();
      //给xmlHttp对象绑定onreadystatechange事件
      xmlHttp.onreadystatechange = function (){
        if(xmlHttp.readyState == 4){//响应已就绪
          if(xmlHttp.status == 200){//判断响应状态码
            var text = xmlHttp.responseText;
            alert(text);
          }
        }
      }
      xmlHttp.open("GET","Servlet01?username=zs&password=123123&name=张三",true);
      xmlHttp.send();
 
    }
 
    function fun02(){
      var xmlHttp = getXMLHttpRequest();
      xmlHttp.onreadystatechange = function (){
        if(xmlHttp.readyState == 4){
          if(xmlHttp.status == 200){
            var text = xmlHttp.responseText;
            alert(text);
          }
        }
      }
      xmlHttp.open("POST","Servlet02",true);
      //post需要设置请求头
      xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
      xmlHttp.send("username=wyz&password=123456&name=吴彦祖");
    }
 
    function getXMLHttpRequest(){
      var xmlHttp;
 
      if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
      }else if(window.ActiveXObject){
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      return xmlHttp;
    }
  </script>
</html>
 
复制

Servlet01：

package com.qf.servlet;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PipedWriter;
import java.io.PrintWriter;
 
@WebServlet("/Servlet01")
public class Servlet01 extends HttpServlet {
 
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
 
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
 
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String name = request.getParameter("name");
        System.out.println(username+"--"+password+"--"+name);
 
        PrintWriter pw = response.getWriter();
        pw.write("呵呵呵");
    }
}
复制

Servlet02：

package com.qf.servlet;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
 
@WebServlet("/Servlet02")
public class Servlet02 extends HttpServlet {
 
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
 
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
 
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String name = request.getParameter("name");
        System.out.println(username+"--"+password+"--"+name);
 
        PrintWriter pw = response.getWriter();
        pw.write("呵呵呵");
    }
}
复制

注：onreadystatechange事件：

函数描述
onreadystatechange每当 readyState 属性改变时，就会调用该函数。
属性描述
readyState存有 XMLHttpRequest 的状态。
从 0 到 4 发生变化:
0 - 请求未初始化服务器
1 - 连接已建立
2 - 请求已接收
3 - 请求处理中
4 - 请求已完成，且响应已就绪
status存有响应的状态。
200 - OK
404 - 未找到页面

案例1：注册账号提示

注册页面，账号显示能不能用

StudentController:

public void isRegister(HttpServletRequest request,HttpServletResponse response) throws IOException {
        String username = request.getParameter("username");
        boolean isRegister = studentService.isRegister(username);
        if(isRegister){
            response.getWriter().write("1");
        }else {
            response.getWriter().write("-1");
        }
        
    }
复制

register.jsp:

var bool = false;
    document.getElementById("registerForm").onsubmit = function (){
        return bool;//只有账号可以注册时才允许提交
    };
 
    var span = document.getElementsByTagName("span")[0];
    var username = document.getElementById("username");
    username.onblur = function (){
        var xmlHttp = getXMLHttpRequest();
 
        //给xmlHttp对象绑定onreadystatechange事件
        xmlHttp.onreadystatechange = function (){
            if (xmlHttp.readyState == 4){//响应已就绪
                if(xmlHttp.status == 200){//判断响应状态码
                    var text = xmlHttp.responseText;//获取响应数据
                    if (text == "1"){
                        span.innerText = "恭喜，账号可以注册";
                        span.style.color = "green";
                        bool = true;
                    }else if (text == "-1"){
                        span.innerText = "抱歉，该账号已被注册";
                        span.style.color = "red";
                        bool = false;
                    }
                }
            }
        }
 
        xmlHttp.open("GET","Student?action=isRegister&username="+username.value,true);
        xmlHttp.send();
    }
 
    function getXMLHttpRequest(){
        var xmlHttp;
        if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();
        }else if(window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlHttp;
    }
复制

案例2：二级联动

思路：Mapper层：用户拿到所有的省份以及通过parent_code拿到省份对应的城市数据。

Service层：把所有的省份数据和相应的城市数据用JSON.toJSONString()方法转换成json格式的字符串，返回字符串。

controller层：把拿到的json字符串用response.getWriter().write()方法（字符流中的打印流）返回到页面中。

jsp页面：通过Ajax获得数据，并在select中创建option，设置其value和innerText。

register.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background: #f0f0f0;
        }
    </style>
</head>
<body>
 
 
<form id="registerForm" action="Student?action=register" method="post" enctype="multipart/form-data">
    ${msg}
    <h2>欢迎来到注册页面</h2>
    <br/>
    账号：<input type="text" name="username" id="username"/><span></span><br/>
    密码：<input type="password" name="password" /><br />
    姓名：<input type="text" name="name" /><br />
    年龄：<input type="text" name="age" /><br />
    性别：
    <input type="radio" name="sex" value="man" checked="checked"/>男
    <input type="radio" name="sex" value="woman"/>女
    <br />
    爱好：
    <input type="checkbox" name="hobbies" value="football" />足球
    <input type="checkbox" name="hobbies" value="basketball" />篮球
    <input type="checkbox" name="hobbies" value="shop" />购物
    <br />
    籍贯：
    <select id="province" name="province">
        <option value="null">---请选择---</option>
    </select>省
    <select id="city" name="city">
        <option value="null">---请选择---</option>
    </select>市
        <br/>
    <input type="file" name="photo"/><br/>
    <input type="submit" value="注册" />
    <button type="button" οnclick="fun01()">返回</button>
</form>
 
<script type="text/javascript">
    function fun01(){
        window.location = "welcome.html";
    }
    var province = document.getElementById("province");
    function showProvince() {
        var xmlHttp = getXMLHttpRequest();
        xmlHttp.onreadystatechange= function (){
            if(xmlHttp.readyState==4){
                if(xmlHttp.status==200){
                    var text = xmlHttp.responseText;
                    var pros = eval(text);
                    for (let i = 0; i < pros.length; i++) {
                        var option = document.createElement("option");
                        option.value = pros[i].code;
                        option.innerText = pros[i].name;
                        province.appendChild(option);
                    }
                }
            }
        };
        xmlHttp.open("GET","User?action=getProvinces",true);
        xmlHttp.send();
    }
    showProvince();
 
    var city = document.getElementById("city");
    province.onchange = function (){
        var parentCode = this.value;
        var xmlHttp = getXMLHttpRequest();
        xmlHttp.onreadystatechange = function (){
            if(xmlHttp.readyState==4){
                if(xmlHttp.status==200){
                    city.length=0;
                    var text = xmlHttp.responseText;
                    var cities = eval(text);
                    console.log(cities);
                    for (let i = 0; i < cities.length; i++) {
                        var option = document.createElement("option");
                        option.value =cities[i].code;
                        option.innerText =cities[i].name;
                        city.appendChild(option);
                    }
                }
            }
        };
        xmlHttp.open("GET","User?action=getCities&parentCode="+parentCode,true);
        xmlHttp.send();
    };
 
 
 
    var bool = false;
    document.getElementById("registerForm").onsubmit = function (){
        return bool;//只有账号可以注册时才允许提交
    };
 
    var span = document.getElementsByTagName("span")[0];
    var username = document.getElementById("username");
    username.onblur = function (){
        var xmlHttp = getXMLHttpRequest();
 
        //给xmlHttp对象绑定onreadystatechange事件
        xmlHttp.onreadystatechange = function (){
            if (xmlHttp.readyState == 4){//响应已就绪
                if(xmlHttp.status == 200){//判断响应状态码
                    var text = xmlHttp.responseText;//获取响应数据
                    if (text == "1"){
                        span.innerText = "恭喜，账号可以注册";
                        span.style.color = "green";
                        bool = true;
                    }else if (text == "-1"){
                        span.innerText = "抱歉，该账号已被注册";
                        span.style.color = "red";
                        bool = false;
                    }
                }
            }
        };
 
        xmlHttp.open("GET","Student?action=isRegister&username="+username.value,true);
        xmlHttp.send();
    };
 
    function getXMLHttpRequest(){
        var xmlHttp;
        if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();
        }else if(window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlHttp;
    }
</script>
 
</body>
</html>
 
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/14450.html
标签
java-ee
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！