AJAX & JSON & jackjson解析器

最新推荐文章于 2024-06-17 19:10:20 发布
最新推荐文章于 2024-06-17 19:10:20 发布
阅读量220 收藏 1
点赞数
分类专栏： Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45627031/article/details/107146845
版权

AJAX & JSON

AJAX(阿贾克斯)

1. 概念：

ASynchronous JavaScript And XML 异步的JavaScript 和 XML

2. 异步和同步

客户端和服务器端相互通信的基础上

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

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

3. 实现方式：
1. 原生的JS实现方式（了解）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义方法
        function fun() {
            //发送异步请求
            //1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.建立连接
            /*
            * 参数：
            *       1.请求方式
            *       2.请求的URL
            *       3.同步或异步：true（异步）或 false（同步）
            * */
            xmlhttp.open("GET","ajaxServlet?username=ajax",true);
            //3.发送请求
            xmlhttp.send();
            //4.接受来自服务器的响应结果
            //当xmlhttp对象的就绪状态改变时，就促发事件onreadystatechange
            xmlhttp.onreadystatechange=function() {
                //判断readyState就绪状态是否为4,判断status响应状态是否为200
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var responseText = xmlhttp.responseText;
                    alert(responseText);

                }
            }


        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
2. JQeury实现方式
  1. 语法：$.ajax({键值对});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    //jquery的js w
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            $.ajax({
                url: "ajaxServlet",// 请求路径
                type:"POST",// 请求方式
                //data:"username=zhangsan",
                data: {"username":"zhangsan"},//请求参数
                success: function (data) {//表示如果请求响应出现成功，会执行的回调函数
                    alert(data)
                },
                error: function () {
                    alert("出错")
                },//表示如果请求响应出现错误，会执行的回调函数
                dataType: "text"//设置接受到的响应数据的格式
            });
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
2. $.get()：发送get请求
  • 语法：$.get(url, [data], [callback], [type])
  • 参数：
    • url：请求路径
    • data：请求参数
    • callback：回调函数
    • type：响应结果的类型

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun(){
            $.get("ajaxServlet","username=lisi",function (data) {
                alert(data)
            },"text")
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
3. $.post()：发送post请求
  • 语法：$.post(url, [data], [callback], [type])
  • 参数：
    • url：请求路径
    • data：请求参数
    • callback：回调函数
    • type：响应结果的类型

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun(){
            $.post("ajaxServlet","username=wanwu",function (data) {
                alert(data)
            },"text")
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>

JSON

1. 概念：

JavaScript Object Notation JavaScript对象表示法

var p = {"name":"张三","age":23,"gender":"男"};
  • json现在多用于存储和交换文本信息的语法
  • 进行数据的传输
  • JSON 比 XML 更小、更快，更易解析。
2. 语法

基本规则

Json 定义格式：
var 变量名 ={
“key”:value, //Number 类型
“key2”:“value”, // 字符串类型
“key3”:[], // 数组类型
“key4”:{}, //json 对象类型
“key5”:[{},{}] //json 数组
};

值得取值类型：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）	{"persons":[{},{}]}
对象（在花括号中） {"address":{"province"："陕西"....}}
null
  • 数据由逗号分隔：多个键值对由逗号分隔
  • 花括号保存对象：使用{}定义json 格式
  • 方括号保存数组：[]

JSON 中两个常用的方法

JSON.stringify( json ); 此方法可以把一个 json 对象转换成为 json 字符串

JSON.parse( jsonString ); 此方法可以把一个 json 字符串转换成为 json 对象

获取数据

  1. json对象.键名
  2. json对象[“键名”]
  3. 数组对象[索引]

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义json对象
        var json={"name":"张三","age":23,"gender":"男"};
        //获取json中的值
        alert(json.name)//张三
        //遍历json中的中的所有键与值
        for (var key in json){
            alert(key+":"+json[key])
        }

        var ps = [{"name": "张三", "age": 23, "gender": true},
            {"name": "李四", "age": 24, "gender": true},
            {"name": "王五", "age": 25, "gender": false}];
        //alert(ps[1].name)//李四
        //遍历ps中的中的所有键与值
        for (var i = 0; i < ps.length; i++) {
            var p = ps[i];
            for (var key in p ){
                alert(key+":"+p[key])
            }
        }
        var ps1={"person":[{"name": "张三", "age": 23, "gender": true},
                {"name": "李四", "age": 24, "gender": true},
                {"name": "王五", "age": 25, "gender": false}]}
        alert((ps1.person[2].name));//王五
    </script>
</head>
<body>

</body>
</html>

JSON解析器：

常见的解析器：Jsonlib，Gson，fastjson，jackson

导入jackson的相关jar包

<!--jackjson -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.10.1</version>
</dependency>

注解：

  1. @JsonIgnore：排除属性。
  2. @JsonFormat：属性值得格式化 @JsonFormat(pattern = "yyyy-MM-dd")

javabean标准类

package cn.fx.domain;

import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnore;

import java.util.Date;

public class Person {

    private String name;
    private int age;
    private String gender;

    //@JsonIgnore // 忽略该属性
    @JsonFormat(pattern = "yyyy-mm-dd")
    private Date birthday;

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    public String getName() {
        return name;
    }

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

    public int getAge() {
        return age;
    }

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

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

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

测试类

package cn.fx.test;


import cn.fx.domain.Person;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.io.Writer;
import java.util.Date;


public class text {
    @Test
    public void text() throws JsonProcessingException {
        Person person=new Person();
        person.setName("张三");
        person.setAge(23);
        person.setGender("男");

        //调用ObjectMapper的相关方法进行转换
        ObjectMapper mapper=new ObjectMapper();
        String per = mapper.writeValueAsString(person);
        System.out.println(per);//{"name":"张三","age":23,"gender":"男"}
    }

    @Test
    public void text1() throws IOException {
        Person person=new Person();
        person.setName("张三");
        person.setAge(23);
        person.setGender("男");

        //调用ObjectMapper的相关方法进行转换
        ObjectMapper mapper=new ObjectMapper();
        mapper.writeValue(new File("d://a.txt"),person);//{"name":"张三","age":23,"gender":"男"}
    }
    @Test
    public void text2() throws IOException {
        Person person=new Person();
        person.setName("张三");
        person.setAge(23);
        person.setGender("男");
        person.setBirthday(new Date());

        //调用ObjectMapper的相关方法进行转换
        ObjectMapper mapper=new ObjectMapper();
        mapper.writeValue(new FileWriter("d:b.txt"),person);//{"name":"张三","age":23,"gender":"男","birthday":"2020-03-05"}
    }

}

在这里插入图片描述

我是泛滥
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
spring mvc 入门系列之五--结合Jackson和jquery实现的Ajax
编程琐事123
06-21 2783
spring mvc 结合 jquery和jackson 实现的ajax入门实验 一、获取所需要的jackson的jar包，本项目没有结合maven，前段时间刚刚学习了maven，正好复习一下。借助了另一个使用了maven的项目，在其pom.xml中添加依赖： com.fasterxml.jackson.core jackson-
Ajax&Json笔记
03-28
在Ajax应用中，JSON经常被用作数据交换格式，因为它能直接被JavaScript解析，不需要额外的解析库。当一个Ajax请求发送到服务器时，服务器端处理请求并返回JSON格式的数据。JavaScript的XMLHttpRequest对象接收到这些...
ajax（六）使用 Jackson
北风
02-21 969
下载依赖库jar包 Jackson的jar all下载地址：http://jackson.codehaus.org/1.7.6/jackson-all-1.7.6.jar ObjectMapper mapper = new ObjectMapper(); String result = mapper.writeValueAsString(sc); 注意： 1.Jack
jackson的@JsonProperty来对字段进行序列化和反序列化重命名
weixin_47733858的博客
04-13 2445
有时候在对字段进行序列化或者反序列化的时候需要对字段进行重命名,这时候可以通过jackson里面的@JsonProperty进行改名字见下代码 // 首先引入jack的pom包 <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> .
Spring Boot Json 之 Jackjson Fastjson
fishpro的博客
03-18 653
Spring Boot Json 之 Jackjson Fastjson1 新建 Spring Boot Maven 示例工程项目2 编写代码用于测试示例2.1 用户实体类2.2 控制层代码3 Jackson3.1 依赖引入 Jackson3.2 配置 Jackson3.3 Jackson 序列化3.4 Jackson 反序列化3.5 常用注解@JsonIgnore@JsonFormat@Json...
Jackson详细介绍
eff666的博客
02-28 8982
Jackson是基于Java平台的一套数据处理工具，被称为”最好的Java Json解析器”。它可以使我们高效、简便的处理json字符串。1、Jackson的版本以及maven依赖重点内容<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId
JSON及AJAX超详细笔记
2401_85767533的博客
06-17 670
1.2 Java和JSON的对照。
AJAX和JSON
持续Java学习中
03-21 562
AJAX和JSON1、概述2、JSON2.1、知识储备前提2.1、初识JSON2.3、使用第三方jar包JackJson2.4、工具类的妙用2.5、使用第三方jar包FastJson3、AJAX3.1、初始AJAX3.2、jQuery的AJAX3.3、返回后端字符串案例3.4、利用AJAX实现登录案例 1、概述 Web1.0时代 早期：如果登录失败，需要刷新页面，才能重新登录 Web2.0时代 ...
SpringMVC（二）（数据绑定、json、ajax）
来一杯Java咖啡
10-19 336
1.请求参数的绑定 绑定机制: 表单提交的数据都是k=v格式的 username=jack&password=123 SpringMVC的参数绑定过程是把表单提交的请求参数，作为控制器中方法的参数进行绑定的 要求：提交表单的name和参数的名称是相同的 支持的数据类型 ​ 基本数据类型和字符串类型 ​ 实体类型（JavaBean） ​ 集合数据类型（List、map集合等） ​ 基本数据类型和字符串类型 ​ 提交表单的name和参数的名称是相同的，区分大小写 实体类型（JavaBean..
Ajax&Json视频教程
06-28
Ajax（异步JavaScript和XML）...通过这个Ajax&Json视频教程，你将能够熟练地在Web应用中运用Ajax和JSON，实现无刷新的数据交互，提升用户的浏览体验。无论你是初学者还是有经验的开发者，这都将是一次充实的学习之旅。
Ajax&Json&XML.html
02-04
Ajax&Json&XML常用基本操作 JSON数据和Java对象的相互转换 常见的解析器：Jsonlib，Gson，fastjson，jackson JSON转为Java对象 1. 导入jackson的相关jar包 2. 创建Jackson核心对象 ObjectMapper 3.调用...
day22_Ajax&Json教案_docx1
08-04
1. 概念： ASynchronous JavaScript And XML 1. 异 1. 原 1. 请 2. 请 3. 同步 1. 原 1. 请 2. 请
Ajax&Json的联动和验证
07-15
在Ajax请求中，JSON常用于数据的传输，因为它可以直接被JavaScript对象表示，无需额外的解析过程。例如，上面的服务器响应可能是这样的JSON字符串： ```json { "provinces": [ {"id": 1, "name": "省份1"}, {"id...
严重 [http-nio-8080-exec-1] org.apache.catalina.core.ApplicationDispatcher.invoke Servlet.service() fo
我是泛滥
01-05 4414
严重 [http-nio-8080-exec-1] org.apache.catalina.core.ApplicationDispatcher.invoke Servlet.service() for servlet [jsp] threw exception 解决办法：缺少jar包 jstl-1.2.jar standard-1.1.2.jar
实现一个简单用户登录案例 Tomcat+Servlet+jdbc+mysql+html
我是泛滥
06-18 3001
简单用户登录案例一、创建数据库环境二、搭建web环境，Tomcat服务器三、简单登录页面HTML四、导入所需项目jar包五、编写JavaBean标准类六、[Druid连接池](https://blog.csdn.net/weixin_45627031/article/details/106535010)1.定义配置文件2. 定义JDBCUtils工具类3.使用工具类操作表User七、定义Servlet类1.Servlet2.登录错误显示页面 （failServlet）3.成功登录显示页面 （SuccessS
Exception javax.servlet.ServletException: Servlet execution threw an exception
我是泛滥
06-18 2974
1.在测试servlet项目是报如下错误： 2.问题原因 jar包导入不齐全或不匹配 3.解决方案 在WEB-INF中lib目录下导入相关jar包 严格记住导入相关jar包要放在WEB-INF中lib目录下（困扰我一天的东西，希望各位同仁不要像我一样） ...
HTTP响应 Response对象
我是泛滥
06-19 1817
Response对象一、Response对象功能1. 设置响应行2. 设置状态码：setStatus(int sc)3. 设置响应头：4.重定向便捷方法5.request转发6.重定向 与 转发总结7.相对路径 与 绝对路径8.虚拟目录二、服务器输出字符数据到浏览器三、服务器输出字节数据到浏览器 一、Response对象功能 功能：设置响应消息 1. 设置响应行 行格式：HTTP/1.1 200 ok 2. 设置状态码：setStatus(int sc) response.setStatus(302);
javax.el.PropertyNotFoundException: 类型[cn.itcast.javaBean.User]上找不到属性[birstr]
我是泛滥
06-23 1525
今天在JSP利用EL表达式取值时报"javax.el.PropertyNotFoundException”查了好半天一直是找不到属性，这个错误让我好无语好无语 下面给大家介绍解决方法。 解决方案： 当你遇到这错误"javax.el.PropertyNotFoundException”首先看你javaBean类 1.里面xxx属性出问题，检查以下你的get方法写法是否正确 2.页面用el表示时，应该将第一个字母改为小写 如图前三个表示正确，最后一个是错误 为什么el表示时，第一个字母不能写大写？ 首先我们
ajax解析json
最新发布
06-21
当涉及到解析JSON（JavaScript Object Notation）数据时，AJAX通常使用`XMLHttpRequest`对象或现代的fetch API发起异步请求。 下面是使用AJAX解析JSON的一般步骤： 1. 创建XMLHttpRequest对象（或使用fetch）： ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值