JSON、Ajax

2024-07-12 1834阅读

Day43

JSON

简介：

JSON、Ajax
（图片来源网络，侵删）

JSON：JavaScript Object Notation是一种表示对象的方式

基于JavaScript语言的轻量级的数据交换格式;（即:用来传输数据的一种格式）

现在传输数据都是用的JSON格式，渐渐替代了xml格式。

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

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

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

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

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

客户端中处理JSON

解析JSON -> JS对象

		
		
			//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);

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

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

		
		
				
			var jsonStrs = "[{'name':'张三','age':18},{'name':'李四','age':24}]";
			var jsArr = eval(jsonStrs);
			for (var i=0;i
				console.log(jsArr[i].name);
				console.log(jsArr[i].age);
			}
			
			
		 解析成JSON格式的字符串 
 
		
		
				
			function Student(name,age){
				this.name = name;
				this.age = age;
			}
			var stuObj1 = new Student("张三",18);
			var jsonStr = JSON.stringify(stuObj1);
			console.log(jsonStr);
			
		
	

 
 
注：JSON.stringify（obj）方法。
 
 
JS数组 -> 解析成JSON格式的字符串
 
 
		
		
				
			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);
			
			
			
		
	

 
 

服务端（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  
 
 
 
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 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 bookMap = new HashMap();
        //将JSON格式的字符串转换为Map集合对象
        Map map = (Map) JSON.parse(jsonStr);
        Set entries = map.entrySet();
        for (Map.Entry entry : entries) {
            String key = entry.getKey();
            JSONObject value = entry.getValue();
            //将JSONObject对象转换为Book对象
            Book book = JSONObject.toJavaObject(value, Book.class);
            bookMap.put(key,book);
        }
        Set bookEntries = bookMap.entrySet();
        for (Map.Entry 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 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 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
 
 
 

  
    $Title$
  
  
    向Servlet01发送请求
    向Servlet02发送请求
  
  
    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;
    }
  


 
 
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:



    
    Title
    
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background: #f0f0f0;
        }
    



    ${msg}
    
欢迎来到注册页面

    

    账号：

    密码：

    姓名：

    年龄：

    性别：
    男
    女
    

    爱好：
    足球
    篮球
    购物
    

    籍贯：
    
        ---请选择---
    省
    
        ---请选择---
    市
        


    
    返回


    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
VPS购买请点击我

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

相关阅读

目录[+]