AJAX & JSON【JAVAEE基础】

最新推荐文章于 2024-04-20 19:07:10 发布

liudachu

最新推荐文章于 2024-04-20 19:07:10 发布

阅读量194

点赞数

分类专栏： JAVAEE笔记文章标签： ajax json js web 异步

本文链接：https://blog.csdn.net/liudachu/article/details/106493703

版权

JAVAEE笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

AJAX

概念:ASynchronous Javascript And XML 异步的Javascript 和XML

异步和同步
- 客户端必须等待服务器的响应。在等待的期间客户端不能做其他操作。
- 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其它操作。
Ajax，是指一种无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页(不使用Ajax)如果需要更新内容，必须重载整个网页页面。
目的是为了提升用户体验

2.实现方式

原生的JS实现方式(了解)
…
JQuery实现方式

1.$ .ajax()

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

//使用$.ajax()发送异步请求
    $.ajax({
             url:"AjaxServlet",//请求路径
             type:"POST",//请求方式
             data:{"username":"jack","age":23},//data:"username=jack&age=23",//请求参数
             success:function (data) {
                 alert(data);
             },
             error:function () {
                 alert("出错了");
             },//表示如果请求响应出现错误，会执行的回掉函数。
             dataType:"text" //设置接收到的响应数据格式
         });


//AjaxServlet
package com.chif.servlet;

import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取请求参数
        String username=request.getParameter("username");
        
        //2.打印username
        System.out.println(username);
        //3.响应
        response.getWriter().write("hello:"+username);

    }
}

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 type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script>
    
        function fun(){
            //$.get发送异步请求
            $.get("AjaxServlet",{"username":"rose"},function (data) {
                alert(data);
            },"text");
            //$.post()同上
        }
        
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input type="text">
</body>
</html>

3.$.post()：发送post请求

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

JSON

1.概念：JavaScript Object Notation JavaScript对象表示法

JAVA对象
    Person p=new Person();
     p.setName("张三");
     p.setAge(23);
     p.setGender("男");

使用Json表示
	var p={"name":"张三","age":23,"gender":"男"};

json现在多用于存储和交换文本信息的语法。
进行数据的传输。
JSON比XML 更小，更快，更易解析。

2.语法：

1.基本规则

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

2.获取数据:

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

<script>
        //定义基本数据格式
        var person={"name":"张三","age":23,"gender":true};

        //嵌套格式
         var persons={"psersons":[
                 {"name":"张三","age":23,"gender":true},
                 {"name":"李四","age":23,"gender":true},
                 {"name":"王五","age":23,"gender":true},
             ]};
         alert(persons.psersons[2].name);

        //数组
        var ps=[
            {"name":"张三","age":23,"gender":true},
            {"name":"李四","age":23,"gender":true},
            {"name":"王五","age":23,"gender":true},
        ];

        //遍历
        //获取person对象中的所有的键和值
         for (var key in person){
             //alert(key+":"+person.key);//相当于person."name" 获取不到
             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]);
            }
        }

    </script>

3.JSON数据和java对象的相互转换

JSON解析器：
常见的解析器：Jsonlib,Gson,fastjson,jackson.

1.JSON转为JAVA对象
1.导入jackson的相关Jar包。
2.创建jackson核心对象 ObjectMapper
3.调用ObjectMapper的相关方法进行转换
1.readValue(json字符串数据,class)

 //Json转为Java对象
    public static void test3()throws Exception{
        //初始化Json字符串
        String json="{\"name\":\"张三\",\"age\":20,\"gender\":\"男\",\"date\":\"2020-23-31\"}";

        //创建ObjectMapper对象
        ObjectMapper mapper=new ObjectMapper();

        //转换为Java对象
        Person person = mapper.readValue(json, Person.class);
        System.out.println(person);


    }

2.JAVA对象转为JSON对象

使用步骤：
1.导入jackson的相关Jar包。

2.创建jackson核心对象 ObjectMapper
3.调用ObjectMapper的相关方法进行转换
1.转换方法:
*writeValue(参数1，object)
参数1：
File：将obj对象转换为json字符串，并保存到指定文件中
Writer：将obj对象转换为json字符串，并将json数据填充到字符输出流中。
OutputStream：将obj对象转换为json字符串，并将json数据填充到字节输出流中。
*writeValueAsString(obj)：将对象转换为json字符串

//Java对象转为Json对象
    public static void test() throws Exception {
        //1.创建Person对象
        Person p=new Person();
        p.setName("张三");
        p.setAge(20);
        p.setGender("男");
        p.setDate(new Date());

        //2.创建Json的核心对象  ObjectMapper
        ObjectMapper mapper=new ObjectMapper();

        //3.转换
        /*
            转换方法
              writeValue(参数1，object)
                参数1：
                   File：将obj对象转换为json字符串，并保存到指定文件中
                   Writer：将obj对象转换为json字符串，并将json数据填充到字符输出流中。
                   OutputStream：将obj对象转换为json字符串，并将json数据填充到字节输出流中。

              writeValueAsString(obj)：将对象转换为json字符串
         */
        String json = mapper.writeValueAsString(p);
        System.out.println(json);

注解：
1.@JsonIgnore：排除属性
2.@JsonFormat：属性值的格式化
@JsonFormat(pattern = “yyyy-mm-dd”)

Person类中加入注解

    @JsonFormat(pattern = "yyyy-mm-dd")
    private Date date;

3.复杂的Java对象转换为Json
1.List：输出结果数组 [{"name":"张三","date":1597992165176,"age":20,"gender":"男"},{"name":"张三","date":1597992165176,"age":20,"gender":"男"},{"name":"张三","date":1597992165176,"age":20,"gender":"男"}]
2.Map：输出结果和对象格式一致 {"1":{"name":"张三","date":1597992029224,"gender":"男","age":20},"2":{"name":"张三","date":1597992029224,"gender":"男","age":20},"3":{"name":"张三","date":1597992029224,"gender":"男","age":20}}

 public static void test2() throws Exception {
        Person p1 = new Person();
        p1.setName("张三");
        p1.setAge(20);
        p1.setGender("男");
        p1.setDate(new Date());

        Person p2 = new Person();
        p2.setName("张三");
        p2.setAge(20);
        p2.setGender("男");
        p2.setDate(new Date());

        Person p = new Person();
        p.setName("张三");
        p.setAge(20);
        p.setGender("男");
        p.setDate(new Date());

        List<Person> ps=new ArrayList<Person>();
        ps.add(p);
        ps.add(p1);
        ps.add(p2);

        ObjectMapper mapper=new ObjectMapper();

        String json = mapper.writeValueAsString(ps);

        System.out.println(json);

ajax在web中的图解

5556

Ajax中Json对象在页面和Servlet之间的传递和遍历

Servlet传递json案例：

  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.调用Service查询获取list集合
        ProvinceService service=new ProvinceServiceImpl();
        List<Province> list = service.findAll();
        //2.序列化list为Json
        ObjectMapper mapper=new ObjectMapper();
        String json = mapper.writeValueAsString(list);

        //3.响应结果
        response.setContentType("application/json;charset=UTF-8");//设置MIME
        response.getWriter().write(json);//响应Json字符串数组
        
    }

Ajax遍历Json案例：

 <script>
        $(function () {
            $.get("provinceServlet",{},function (data) {
                //1.获取select下拉列表
                var select=$("#province");
                //2.遍历Json数组
                $(data).each(function () {
                    //3.创建<option>
                    var option="<option name='"+this.id+"'>"+this.name+"</option>"
                    //4.追加<option>
                    select.append(option);
                })
                
            })
        })
    </script>

案例：

总结最近学习的数据库连接池、ajax、json的一个项目
Ajax+Json+JdbcTemplate+数据库连接池(Druid)实现注册校验用户名是否存在

liudachu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX & JSON【JAVAEE基础】

AJAX1.概念:ASynchronous Javascript And XML 异步的Javascript 和XML异步和同步客户端必须等待服务器的响应。在等待的期间客户端不能做其他操作。客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其它操作。Ajax，是指一种无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传
复制链接

扫一扫

专栏目录