AjaxAndJson

最新推荐文章于 2022-04-29 19:40:12 发布
最新推荐文章于 2022-04-29 19:40:12 发布
阅读量263 收藏
点赞数
分类专栏： Java ee 开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41826183/article/details/102558156
版权

# AJAX #(异步)

  1. ASynchronous JavaScript And XML
  2. 客户端和服务器端的同步和异步
  3. 提升用户的体验
  4. 是一种在无需加载整个页面的情况下，能够更新部分网页的技术
  5. 通过后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新，（可以在不重新加载整个页面的情况下， 对网页的某部分进行更新）

    原生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. 请求方式：GET、POST
                    * get方式，请求参数在URL后边拼接。send方法为空参
                    * post方式，请求参数在send方法中定义
                2. 请求的URL：
                3. 同步或异步请求：true（异步）或 false（同步）

         */
        xmlhttp.open("GET","ajaxServlet01?username=tom",true);

        //3.发送请求
        xmlhttp.send();

        //4.接受并处理来自服务器的响应结果
        //获取方式 ：xmlhttp.responseText
        //什么时候获取？当服务器响应成功后再获取

        //当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>`

jQuery实现

  1. 三种实现方式
    1. $.ajax()
    `<!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() {
        $.ajax({
            url: "ajaxServlet01",//请求路径
            type: "post", //默认是get
            data: {
                "username": "jack", //参数列表json格式
                "age": "23"
            },
            success:function(data){
                //回调函数
                alert(data)
            }
        });

    }
    //定义方法
    function fun2() {
        $.ajax({
            url: "ajaxServlet02",//请求路径
            type: "post", //默认是get
            data: {
                "username": "tom", //参数列表json格式
                "age": "23"
            },
            success:function(data){
                //回调函数
                alert(data)
            },
            error:function(){
                //出现错误
                alter("出错了");
            },
            dataType:"json"//设置接受的响应数据的格式
        });

    }
</script>


</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">
<input type="button" value="发送异步请求2" onclick="fun2();">

<input>
</body>
</html>`
2. $.get()

    `<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
<title>Title</title>
<script  src="js/jquery-3.3.1.min.js"></script>
<script>

    //定义方法
    /*
        * url:待载入页面的URL地址

        data:待发送 Key/value 参数。

        callback:载入成功时回调函数。

        type:返回内容格式，xml, html, script, json, text, _default。

    */
    function fun() {
        $.get("ajaxServlet02",{username:"rose",age:"12"} ,function(data){
            alert(data)
        },"text")
    }
    function fun2() {
        $.get("ajaxServlet02",{username:"tom",age:"13"} ,function(data){
            alert(data)
        },"text")
    }

</script>


</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">
<input type="button" value="发送异步请求2" onclick="fun2();">

<input>
</body>
</html>`

3. $.post()

    `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  src="js/jquery-3.3.1.min.js"></script>
    <script>

        //定义方法
        /*
        *   url:待载入页面的URL地址
            data:待发送 Key/value 参数。
            callback:载入成功时回调函数。
            type:返回内容格式，xml, html, script, json, text, _default。
*/
        function fun() {
            $.post("ajaxServlet02",{username:"rose",age:"12"} ,function(data){
                alert(data)
            },"text")
        }
        function fun2() {
            $.post("ajaxServlet02",{username:"tom",age:"13"} ,function(data){
                alert(data)
            },"text")
        }

    </script>


</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">
<input type="button" value="发送异步请求2" onclick="fun2();">

<input>
</body>
</html>`

## Json数据格式 ##

  1. 全称是：JavaScript Object Notation---JavaScript对象表示法
  2. Json现在多用于存储和交换信息的语法--进行数据的传输
  3. Json比XML更小，更快，更容易解析

  4. Json的语法

  5. 规则：

    1. 键值对 key 可以使用引号单双多是可以的， 也可以不用引号
    2. 数据之间用逗号分开
    3. 花括号保存对象（可以是数字，字符串（用引号引起来）， 逻辑值（boolean）， 数组（用花括号）， Json对象，null值）
    4. 方括号用来保存数组
`    <script>
    //定义的基本格式
    var Person = {name: "zhangsan", age: "12", gender: "男"}
    alert(Person);
    //嵌套格式 数组{ }---》[ ]
    var Persons = {
        person: [
            { name: "lisi",age: "113", gender: "男"},
            { name: "lisi",age: "113", gender: "男"},
            { name: "lisi",age: "113", gender: "男"},
            { name: "lisi",age: "113", gender: "男"},
        ]
    }
    //嵌套格式：数组里面有多个对象
    var ps=[
        { name: "lisi",age: "113", gender: "男"},
        { name: "lisi",age: "113", gender: "男"},
        { name: "lisi",age: "113", gender: "男"},
        { name: "lisi",age: "113", gender: "男"}
        ]
    //alert(Persons)
</script>`

2.Json获取数据

1.Json对象.键名
2. Json对象[键名]
----------

    `//定义的基本格式
        var Person = {name: "zhangsan", age: "12", gender: "男"}
        var name = Person.name;
        var age = Person["age"];
        var gender = Person['gender'];

        alert(name+age+gender)`

 var Persons = {
            person: [
                {name: "lisi", age: "113", gender: "男"},
                {name: "lisi", age: "113", gender: "男"},
                {name: "lisi", age: "113", gender: "男"},
                {name: "lisi", age: "113", gender: "男"},
            ]
        }
        var name1 = Persons.person[1].name;
        var age1 = Persons.person[1].age;
        var gender1 = Persons.person[1].gender;
        alert(name1+age1+gender1);

## Json的遍历 ##

     //定义的基本格式
    var Person = {name: "zhangsan", age: "12", gender: "男"}
    //遍历Json的key和value
    for(var key in Person){
        //key是一个字符串， 所以不能使用Person.key
        alert(key + Person[key])
    }

` //嵌套格式：数组里面有多个对象
    var ps = [
        {name: "lisi", age: "113", gender: "男"},
        {name: "lisi", age: "113", gender: "男"},
        {name: "lisi", age: "113", gender: "男"},
        {name: "lisi", age: "113", gender: "男"}
    ]
    for (var i = 0; i < ps.length; i++) {
        var p= ps[i]
       for(var key in p){
           alert(key+p[key])
       }

    }`

Json解析器

Jsonlib Gson fastJson （Alibaba）  jackson（springmvc 中的解析器）
  1. Json数据和java对象之间转化
1. json转换java

@Test
public void test04() throws IOException {
    //将json数据转换成java对象
    //1。初始化json数据
    String json="{\"gender\":\"男\",\"name\":\"zhangsan\",\"age\":12}";
    //创建ObjectMapper对象
    ObjectMapper mapper = new ObjectMapper();
    Person person = mapper.readValue(json, Person.class);
    System.out.println(person);
}

@Test
public void test05() throws IOException {//将json字符串转换为List集合
    //1。初始化json数据
    ArrayList<Person> list = new ArrayList<>();
    list.add(new Person("zhangsan", 1212, "nan", new Date()));
    list.add(new Person("zhangsan", 1212, "nan", new Date()));
    list.add(new Person("zhangsan", 1212, "nan", new Date()));
    ObjectMapper mapper = new ObjectMapper();
    String s = mapper.writeValueAsString(list);
    //创建ObjectMapper对象
    ArrayList<String> arrayList = mapper.readValue(s, ArrayList.class);
    System.out.println(arrayList);
}

  @Test
public void test07() throws IOException {
    //json字符串转换成HashMap集合
    Map<String, Object> map = new HashMap<>();
    map.put("name","zhangsan");
    map.put("age",12);
    map.put("gender","男");
    ObjectMapper mapper = new ObjectMapper();
    String s = mapper.writeValueAsString(map);
    //{"gender":"男","name":"zhangsan","age":12}
    HashMap hashMap = mapper.readValue(s, HashMap.class);
    Set set = hashMap.entrySet();
    set.stream().forEach(name-> System.out.println(name));
}

2. java转换成json
    1. 导入jar包jackson
    2. 创建jackson对象ObjectMapper
    3. 使用方法转换成Json字符串

# java转换Json字符串 #

    ` @Test
public void test1() throws IOException { //java对象转化成json字符串
    Person person = new Person("zhangsan", 1212, "nan");
    //创建Jackson的核心对象
    ObjectMapper mapper = new ObjectMapper();
    /*
    * mapper.writeValue（）
    * 参数：
    * File：将对象转换为json字符串， 并保存到指定的文件中
    * Writer：将对象转换为json字符串，并将json数据填充到字符输出流中
    * OutputStream:将对象转换为json对象， 并将json数据填充到字节输出流中
    *
    * */
    String json = mapper.writeValueAsString(person);
    System.out.println(json);//{"name":"zhangsan","age":1212,"gender":"nan"}
    mapper.writeValue(new File("a.txt"),person);


}`

注解

1. 排除属性的 @JsonIgnore：排除属性（忽略该属性 ，在属性或者getset方法中 使用该注解）
2. @JsonFormat：格式化注解：（使用注解格式化， 用在属性或者）
    @JsonFormat(pattern="yyyy-MM-DD")
    @JsonIgnore
    private Date birthday;**
3.list或者map类型转换成Json

@Test
public void test02() throws JsonProcessingException {
    ArrayList<Person> list = new ArrayList<>();
    list.add(new Person("zhangsan", 1212, "nan", new Date()));
    list.add(new Person("zhangsan", 1212, "nan", new Date()));
    list.add(new Person("zhangsan", 1212, "nan", new Date()));
    ObjectMapper mapper = new ObjectMapper();
    String s = mapper.writeValueAsString(list);
    //[{"name":"zhangsan","age":1212,"gender":"nan"},{"name":"zhangsan","age":1212,"gender":"nan"},{"name":"zhangsan","age":1212,"gender":"nan"}]

System.out.println(s);

}
@Test
public void test03() throws JsonProcessingException {
    Map<String, Object> map = new HashMap<>();
    map.put("name","zhangsan");
    map.put("age",12);
    map.put("gender","男");
    ObjectMapper mapper = new ObjectMapper();
    String s = mapper.writeValueAsString(map);
    //{"gender":"男","name":"zhangsan","age":12}
    System.out.println(s);

}
Lbaci
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web工程ajax访问servlet报404错误，访问不到servlet
wumin_chy的博客
07-11 6817
这里就我遇到的问题做一个总结，希望能帮到你 我做一个web工程，ajax访问servlet，一直报404错误，下面粘贴我配置的web.xml,html页面ajax访问serlvet的访问呢方法，serlvet类 web.xml文件：servlet类路径没有问题 ajax访问servlet：这里不需要管function回调函数里面的逻辑处理，只需要看url访问路径 servl
学习笔记之代码记录
chenxu_blog的博客
11-04 748
我发现我写过的代码第二次再写的时候就不记得了，还得去看一遍才会写，所以专门用一篇文章记录各个阶段的代码供自己闲暇时候翻翻看。 Java SE ...
http://localhost:8080/ajax/js/jquery-3.3.1.min.js net::ERR_ABORTED 404
木有君兮的博客
02-24 1573
1.检查路径是否有问题，确保路径是正确的 2.如果路径没有问题，把idea重启了 以上就是我的解决方式。
`AJAX`和`JSON`的解释
weixin_47267628的博客
04-29 1834
AJAX和JSON AJAX 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 xml 异步和同步 异步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作 同步：客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作，使用得客户端的操作是连续的，提升用户的体验 特点 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步.
【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回...
weixin_34218890的博客
05-26 142
作者：ssslinppp      时间：2015年5月26日 15:32:511. 摘要本文讲解如何利用spring MVC框架，实现ajax异步请求以及json数据的返回。Spring MVC与json参考文章：【spring学习笔记-mvc-3】返回json数据-方式1  和 【spring学习笔记-mvc-4】返回json数据-方式2。使用到的技术主要如下：Ajax：使用JQuery 提供...
【Spring学习笔记-MVC-14】Spring MVC对静态资源的访问
chengti1867的博客
03-15 63
作者：ssslinppp 参考链接： http://www.cnblogs.com/luxh/archive/2013/03/14/2959207.html http://www.cnblogs.com/fangqi/...
【Spring学习笔记-MVC-6】SpringMVC 之@RequestBody 接收Json数组对象
xfxf996的博客
12-29 142
本文转载自：https://www.cnblogs.com/ssslinppp/p/4597251.html 作者：ssslinppp 转载请注明该声明。 作者：ssslinppp 1. 摘要 程序流程： 前台使用ajax技术，传递json字符串到后台； 后台使用Spring MVC注解@RequestBody 接受前台传递的json...
SpringMVC 之@RequestBody 接收Json数组对象
rentian1的博客
06-28 3429
来源：https://www.cnblogs.com/ssslinppp/p/4597251.html1. 摘要程序流程：前台使用ajax技术，传递json字符串到后台；后台使用Spring MVC注解@RequestBody 接受前台传递的json字符串，并返回新的json字符串到前台；前台接受后台传递过来的json数据，并显示。2. 前台界面和js&lt;%@ page language="j...
购物车技术,分页技术,ajax动态修改表格数据
12-28
在压缩包文件"ajaxandjson"中，可能包含了实现上述功能的代码示例、配置文件或数据库结构。开发者可以通过研究这些文件来学习如何结合Ajax和JSON（JavaScript Object Notation）实现动态修改表格数据。JSON是一种轻...
Filter和Listener 登录拦截和敏感词汇拦截器JDk动态代理增强GetParameter方法
qq_41826183的博客
10-14 556
FilterAndListener web中的过滤器， 当访问服务器的资源的时候，可以将请求和响应拦截下来 通用化的处理， 比如说登录的功能，统一的编码问题可以放在过滤器中进行拦截 快速入门 ## 定义一个类，实现Filter接口 复写方法 配置拦截路径 注解的配置 `@WebFilter("/*") public class FilterD...
spring03 使用注解的方式 配置bean和实现依赖的注入及整合Junite测试环境
qq_41826183的博客
04-12 362
一，使用注解配置Spring 1.在applicationContext.xml配置文件中配置 <context : component-scan base-package = "cn.itcast.beam."></context> <!--指定扫描的那个包下的所有的类 --> <context:component-scan base...
Oracle 10g安装（其中包括linux和windows中安装）
qq_41826183的博客
12-27 286
百度云地址：https://pan.baidu.com/s/1LpbJ-oWTw63IISW7FWFP-g 百度云链接 其中包括虚拟机和安装文档，和xp虚拟机的镜像，已经虚拟机的安装包，及其注册工具
Request和的登录演示
qq_41826183的博客
09-25 269
Request和Response对象 1. request和Response对象的原理： 1. tomcat服务器根据Url地址，利用反射的原理创建对饮的Servlet对象 2. tomcat创建request对象和response对象， 将请求信息封装到request对象中， 3. Tomcat 将创建好的request和response对象传递给service方法...
数据库连接池C3p0和Druid
qq_41826183的博客
09-24 243
数据库连接池 1. 数据库连接池 是一个容器， 容器中有若干个connection 对象， 我们可以直接来使用， 用完之后自动归还， 是一个物理数据源的工厂。 DataSource接口 1. java.sql 2. getConnection();-- 获取连接 3. 数据库连接池的实现：数据库厂商实现 C3PO ， Druid 阿里巴巴提供的 4. 如果是连接池中的connnecti...
Servlet 基础知识讲解
qq_41826183的博客
11-10 235
1.Http协议：双方在交互的协议，服务区和客户端进行通信的协议，交换数据等 2.http请求数据  请求头：请求行 ，，请求体 3.web资源讲解：在http协议中，绑定了请求和响应双方。客户端和服务端。与web有关的资源、 静态资源 ：html js/css  动态资源：jsp 、servlet 4.servlet是一个Java的小程序，运行在web服务器上，用于接收和响应客户端的...
JspAndEl表达式
qq_41826183的博客
10-14 227
JSP JSP指令 1.用于配置jsp页面的和导入资源文件 2.格式：<%@ 指令名称 属性名=xxx ，%> 3.分类： 1. page 配置jsp页面的 1. contentType：设置相应的MIME类型和响应类型 2. language：语言类型 3. buffer ：缓冲区 默认是8kb 4. import：导包 5. e...
Servlet
qq_41826183的博客
10-14 218
Servlet 概述 1. 概念：运行在服务器端的小程序 2. public interface Servlet :是一个接口 3. 自定义一个类， 实现servlet，重写这个这些方法 快速入门 1. 创建javaee项目 2. 定义一个类来实现servlet接口，重写方法 @Override public void service(ServletReques...
struts 总结
qq_41826183的博客
04-20 215
1. 概念 struts在javaee三层架构扮演的角色2.struts使用优势有哪些 自动封装参数 参数校验 结果的处理（重定向、转发） 国际化 i18n 表单的重复提交 显示等待页面 3.struts的历史， struts2和struts1 没有关系， 前身是webwork 框架 4.导包 地址G:\jarPackage\SSH\struts-2.3.37\a...
Cookie和Session会话技术
qq_41826183的博客
10-14 191
Cookie和Session会话技术 1. 一次会话包含多次请求和响应 2. 一次会话：直到有一方断开连接（会话的功能） 3. 会话的功能：**共享数据的** 4. 客户端会话技术：Cookie 5. 服务器端：Session 快速入门 1. 创建Cookie对象绑定数据new Cookie（） 2. 发送cookie对象 response.addCookie() 3. 获取Cooki...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值