JSON

  1. 定义:JSON(JavaScript Object Notation, JS 对象简谱)是一种轻量级的数据交换格式。它基于 ECMAScript(欧洲计算机协会制定的 JS 规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

  2. 语法:

    1. 基本规则

      • 数据在名称/值对中:json数据是由键值对构成的
      • 键用引号(单双都行)引起来,也可以不使用引号
      • 值得取值类型:
        1. 数字(整数或浮点数 number)
        2. 字符串(在双引号中 string)
        3. 逻辑值(true 或 false)
        4. 数组(在方括号中) {"persons":[{},{}]}
        5. 对象(在花括号中) {"address":{"province":"陕西"....}}
        6. null
      • 数据由逗号分隔:多个键值对由逗号分隔
      • 花括号保存对象:使用{}定义json 格式
      • 方括号保存数组:[]
    2. 获取数据:

      1. json对象.键名
      2. json对象["键名"]
      3. 数组对象[索引]
    3. 遍历

      	//1.定义基本格式
      var person = {"name": "张三", age: 23, 'gender': true}; var ps = [{"name": "张三", "age": 23, "gender": true},
      {"name": "李四", "age": 24, "gender": true},
      {"name": "王五", "age": 25, "gender": false}];
      //获取person对象中所有的键和值
      //for in 循环
      /* for(var key in person){
      //这样的方式获取不行。因为相当于 person."name"
      //alert(key + ":" + person.key);
      alert(key+":"+person[key]);
      }*/
      //获取ps中的所有值
      for (var i = 0; i < ps.length; i++) {
      var p = ps[i];
      for(var key in p){
      alert(key+":"+p[key]);
      }
      }
  3. JSON对象和JS对象的转化

    • JSON 字符串转 JS 对象

      ​ var js对象 = JSON.parse(json对象);

    • JS 对象转 JSON 字符串

      ​ var json对象 = JSON.stringify(js对象);

    	// 写 JSON,这个格式的字符串里面存一个员工数据 id 1 name zs age 18
    var json1 = '{"id":1,"name":"zs","age":18}'; // JSON // 写 JSON,这个格式的字符串里面存两个个员工数据
    var json2 = '[{"id":1,"name":"zs","age":18}, {"id":2,"name":"ls","age":19}]'; // 写 JSON,这个格式的字符串里面存一个员工数据
    var json3 = '{"id":1, "name":"zs", "age":18, "dept":{"id":5,"name":"开发部"}}'; var jsObj1 = {"id":1, "name":"zs", "age":18}; // JS 对象
    var jsObj2 = {id:1, name:"zs", age:18}; // JS 对象 console.log(json1.name); // undefined
    console.log(jsObj1.name); // zs
    console.log(jsObj2.name); // zs // JSON 字符串转 JS 对象
    console.log(JSON.parse(json1).age);
    console.log(JSON.parse(json2));
    console.log(JSON.parse(json3).dept.name);
    // JS 对象转 JSON 字符串
    console.log(JSON.stringify(jsObj2));
    var json4 = "{'id':1,'name':'zs','age':18}"; // 错误格式的 JSON
    console.log(JSON.parse(json4)); // 报错
  4. JSON与JAVA对象的转换

    开发中一般都会使用第三方的一些 JSON 操作的依赖或者 JAR 包来来完成 Java 对象与 JSON 字符串之间的转换。在 Java 中,转换 JSON 的依赖或者 JAR 有很多,这里单讲两种常用:

    • Jackson:在 Spring MVC 中内置支持她,速度也挺快,稳定性比较好。
    • Fastjson:阿里出品,号称是 Java 领域中转换 JSON 最快的一个插件,中文文档比较齐全。
    1. Jackson

      1.0. 使用步骤

      • 导入jackson的相关jar包,或者依赖

      • 创建Jackson核心对象 ObjectMapper

      • 调用ObjectMapper的相关方法进行转换

        • 转换方法:

          • writeValue(参数1,obj):将java对象转为json字符串,并将字符串返回到:以下几个参数的各个功能。

            参数1:

            File:将obj对象转换为JSON字符串,并保存到指定的文件中

            ​ Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中

            OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中

          • writeValueAsString(obj):将java对象转为json字符串,并返回一个字符串

          • readValue(String content, Class valueType):将json字符串转换为Java对象

      1.1. 引入依赖

      <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.6</version>
      </dependency>

      1.2 API使用

      public class Department {
      private Long id;
      private String name;
      private String sn; getXxx()方法/setXxxx()方法
      }
      public class JsonTest {
      
          @Test
      public void testJackson() throws IOException {
      Department department = new Department();
      department.setId(1L);
      department.setName("小猪");
      department.setSn("sn111"); ObjectMapper mapper = new ObjectMapper();
      //序列化:将java对象转化为Json格式的字符串
      String str = mapper.writeValueAsString(department); //{"id":1,"name":"小猪","sn":"sn111"}
      System.out.println(str); //将Json对象写入java对象中
      String str1 = "{\"id\":1,\"name\":\"啦\",\"sn\":\"sn111\"}";
      Department dept = mapper.readValue(str1, Department.class);
      System.out.println(dept.getName());//啦
      }
      }
    2. Fastjson

      2.0 使用步骤:

      • 导入fastjson的相关jar包,或者依赖

      • 使用JSON类的静态方法

        1. public static String toJSONString(Object object):将java对象转换为 json字符串;

        2. public static T parseObject(String text, Class clazz):将json字

          ​ 符串转换为Java对象;

      2.1 引入依赖

      <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.47</version>
      </dependency>

      2.2 AOP使用

      public class JsonTest {
      @Test
      public void testFastJson(){
      Department department = new Department();
      department.setId(1L);
      department.setName("小猪");
      department.setSn("sn111");
      //序列化:将java对象转化为Json格式的字符串
      String str = JSON.toJSONString(department);
      System.out.println(str); String str2 = {\"id\":1,\"name\":\"ajax\",\"sn\":\"sn111\"}";
      Department dept = JSON.parseObject(str2, Department.class);
      //将Json对象写入java对象中
      System.out.println(dept.getName());//ajax
      }
      }

AJAX

1.概念

ASynchronous JavaScript And XML 异步的JavaScript 和 XML

AJax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,提升用户的体验。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

2.异步和同步

异步和同步:客户端和服务器端相互通信的基础上

  • 同步:客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
  • 异步:客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。

3. AJAX缺陷

  • AJAX 大量使用了 Javascript 和 AJAX 引擎,而这个取决于浏览器的支持。IE5.0 及以上、

    Mozilla1.0、NetScape7 及以上版本才支持,Mozilla 虽然也支持 AJAX ,但是提供XMLHttpRequest 的方式不一样。所以,使用 AJAX 的程序必须测试针对各个浏览器的兼容性。
  • AJAX 更新页面内容的时候并没有刷新整个页面,因此,网页的后退功能是失效的;有的用户还经

    常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
  • 对流媒体的支持没有 Flash、Java Applet 好。AJAX 不支持跨域访问,更多参见。

4. Jquery实现方式

  1. $.ajax()

    • 语法:$.ajax({键值对});

              //使用$.ajax()发送异步请求
      $.ajax({
      //请求路径
      url:'',
      //请求方式:POST/GET
      type:"POST",
      //同步还是异步(true异步默认,false同步)
      async:true,
      //传的参数,如果没有参数,直接写{}
      data:{"username":"jack","age":23},
      /*
      当服务器正常应答时,调用suceess对应的方法
      方法中obj为参数,可以起任何名字,代表服务器传递的参数
      */
      success:function (data) {
      alert(data);
      },
      error:function () {
      alert("出错啦...");
      },//表示如果请求响应出现错误,会执行的回调函数
      dataType:"text"//设置接受到的响应数据的格式
      });

    1. $.get():发送get请求

      • 语法:$.get(url, [data], [callback], [type])

        • 参数:

          • url:请求路径
          • data(可选):请求参数
          • callback(可选):回调函数
          • type(可选):响应结果的类型
    2. $.post():发送post请求

      • 语法:$.post(url, [data], [callback], [type])

        • 参数:

          • url:请求路径
          • data(可选):请求参数
          • callback(可选):回调函数
          • type(可选):响应结果的类型

JSON&AJAX的更多相关文章

  1. JSON & Ajax

    Ajax是异步JavaScript和XML是用来在客户端作为一组相互关联的Web开发技术,以创建异步Web应用程序. Ajax模型,Web应用程序可以发送数据和检索数据从一个服务器,而不干扰现有的页面 ...

  2. ecshop JSON,ajax.call 异步传输

    1.res = Ajax.call('user.php?act=depot_id', 'id='+v,null,"GET", "JSON",false); 2. ...

  3. jquery json ajax

    当html中用script包含了不在同一个目录下的js外部文件(主要是为了通用代码的重用)时,这个js文件的 内容就如同在当前html文件中了,写jquery的时候不用考虑路径问题,可以直接引用htm ...

  4. 关于json.ajax ,php的那点事

    $.ajax({ type:'post'/'get'  两者选其一 url:    地址 data: "newdata="+newdata+"&olddata=& ...

  5. Json,Ajax(0516)

    一.JSON简介: JSON(JavaScript Object Notation)是一种轻量级的数据交换语言,以文字为基础,且易于让人阅读,同时也方便了机器进行解析和生成.JSON简单说就是java ...

  6. XML,json,ajax

    一.XML 1.概述:XML全称为Extensible Markup Language, 意思是可扩展的标记语言 2.版本:W3C在1998年2月发布1.0版本:W3C在2004年2月发布1.1版本, ...

  7. 前端数据交互之json&ajax

    1.json json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据 ...

  8. MVC字符串转json,ajax接受json返回值

    #region 功能 /// <summary> /// 查询 微信用户一定年月的账单 /// </summary> /// <param name="year ...

  9. eval json ajax

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...

  10. JavaScript JSON AJAX 同源策略 跨域请求

    网页和Ajax和跨域的关系 1 Ajax使网页可以动态地.异步地的与服务器进行数据交互,可以让网页局部地与服务器进行数据交互 2 Ajax强调的是异步,但是会碰到跨域的问题. 3 而有很多技术可以解决 ...

随机推荐

  1. 跟随Javac代码来解答字节码的疑惑

    前言 本文是跟随掘金小册张师傅的<JVM字节码从入门到精通>练习而写的. 问题 问题一: 有如下代码: 1 package com.sun.tools.javac; 2 3 /** 4 * ...

  2. Angular8 ie兼容性解决

    启用腻子脚本 polyfills.ts /* IE9, IE10 and IE11 requires all of the following polyfills. */ import 'core-j ...

  3. golang RSA2加密/解密

    $go get github.com/wenzhenxi/gorsa test.go文件的内容 运行: $go run test.go package main import ( "fmt& ...

  4. Unix中使用MeteoInfo - Xmanager设置

    通过Xshell等客户端登陆Unix系统运行图形软件(X11)需要有X-server,Xmanager是其中的佼佼者(可惜是商业软件).我通常用Xshell登陆气象局的IBM高性能计算机(AIX系统) ...

  5. day26 Pyhton select功能语句实现

    一.查询语句功能实现 select id,name where age > '20' name_value = {'id':0,'name':1,'age':2,'phone':3,'job': ...

  6. python 使用pyinstaller打包程序

    使用pyinstaller 打包.py脚本,在其他计算机可以直接运行,不需要python环境 安装pyinstaller库 pip install pystaller 打包程序 pyinstaller ...

  7. elasticsearch要点及常用查询

    目录 elasticsearch要点及常用查询 查询与过滤 明确查询和过滤各自的优缺点,以及适用场景. 性能上的差异 适用场景 1.kibana 中操作es-查询 Mapping映射基础 mappin ...

  8. 【树形DP】NOI2003 逃学的小孩

    题目大意 题目链接 PS:可能出题人为了提高难度故意加了很多废话--实际上题目是很简单的 在一棵树上找3个点A.B.C,使AB+BC最大,且满足AC>AB. 样例输入 4 31 2 12 3 1 ...

  9. 【树形DP】ZJOI2008 骑士

    题目内容 洛谷链接 有\(n\)位骑士,每个人的战力可能不同,并且每一个人都有且仅有一个憎恨的人,互相憎恨的人不能在同一队中. 求组合为一个骑士队的最大战斗力. PS:可以去看看题目背景学学历史(雾) ...

  10. spring boot:配置druid数据库连接池(开启sql防火墙/使用log4j2做异步日志/spring boot 2.3.2)

    一,druid数据库连接池的功能? 1,Druid是阿里巴巴开发的号称为监控而生的数据库连接池 它的优点包括: 可以监控数据库访问性能 SQL执行日志 SQL防火墙 2,druid的官方站: http ...