AJAX基础操作&JSON基础学习

最新推荐文章于 2024-06-30 12:07:24 发布

立乱来

最新推荐文章于 2024-06-30 12:07:24 发布

阅读量666

点赞数

分类专栏：笔记 Java web 文章标签： json ajax java

本文链接：https://blog.csdn.net/qq_42107431/article/details/122334482

版权

笔记同时被 3 个专栏收录

81 篇文章 1 订阅

订阅专栏

web

30 篇文章 0 订阅

订阅专栏

Java

22 篇文章 0 订阅

订阅专栏

文章目录

AJAX基础操作&JSON基础学习
- JQeury实现AJAX方式
- JSON
案例：校验用户是否存在

AJAX基础操作&JSON基础学习

JQeury实现AJAX方式

$.ajax()
- 语法：&.ajax({键值对})
$.get()：发送get请求
- 语法：$.get(url,[data],[callback],[type])
- 参数：
  - url：请求参数（必需）
  - data：请求参数
  - callback：回调函数
  - type：响应结果的类型
$.post()：发送post请求
- 语法：$.post(url,[data],[callback],[type])
- 参数：
  - url：请求参数（必需）
  - data：请求参数
  - callback：回调函数
  - type：响应结果的类型

JSON

概念：JavaScript Object Notation JavaScript对象表示法
1. json现在多用于存储和交换文本信息的语法。
2. 进行数据的传输。
3. JSON比XML更小、更快、更容易解析。
json语法
1. 基本规则
  - 数据在名称/值中：json数据是由键值对构成的
    - 键用引号(单双都行)引起来，也可以不适用引号
    - 值的取值类型：
      1. 数字（整数或浮点数）
      2. 字符串（在双引号中）
      3. 逻辑值（true或false）
      4. 数组（在方括号中）{“persons”:[{},{}]}
      5. 对象（在花括号中）{“address”:{“province”:“陕西”…}}
      6. null
  - 数据由逗号分隔：多个键值对由逗号分隔
  - 花括号保存对象：使用{}定义json格式
  - 方括号保存数组：[]
2. 获取数据
  1. json对象.键名
  2. json对象[“键名”]
  3. 数组对象[索引]

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

JSON解析器：
- 常见的解析器：Jsonlib，Gson，fastjson，jackson
JSON转为java对象

java对象转换JSON

使用步骤：

导入jackson的相关jar包
创建Jackson核心对象ObjectMapper

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

转换方法：

转换方法
*      writeValue(参数1,obj):
*          参数1:
*              File:将obj对象转换为JSON字符串，并且保存到指定的文件中
*              Writer:将obj对象转换为JSON字符串，并且json数据填充到字符输出流中
*              OutputStream:将obj对象转换为JSON字符串，并且json数据填充到字节输出流中
*      writeValueAsString(obj)：将对象转为json字符串

注解：
1. @JsonIgnore：排除属性
2. @JsonFormat：属性值的格式化
  - @JsonFormat(pattern=(“yyyy-MM-dd”)
复杂java对象转换
1. List：数组
2. Map：对象格式一致

案例：校验用户是否存在

服务器相应的数据，在客户端使用时，想要当做json数据格式使用
1. $.get(type)：将最后一个参数type指定为“json”
2. 在服务器端设置MIME类型
```
//设置响应的数据格式为json
response.setContentType("application/json;charset=utf-8");
```

servlet

package cn.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.HashMap;

@WebServlet("/fus")
public class FindUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
        System.out.println("do");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //设置响应的数据格式为json
        response.setContentType("application/json;charset=utf-8");
        //获取用户名
        String username = request.getParameter("username");
        //调用service层判断用户名是否存在
        System.out.println(username);
        HashMap<String, Object> map = new HashMap<>();

        if ("tom".equals(username)){
            //存在
            map.put("userExsit",true);
            map.put("msg","用户名已存在");

        }else{
            map.put("userExsit",false);
            map.put("msg","用户名可用");
        }

        //将map转换成json，并且写到页面上
        //将map转换成json
        ObjectMapper mapper = new ObjectMapper();
        //并且写到页面上（传给客户端）
        mapper.writeValue(response.getWriter(),map);
    }
}

html

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

</head>
<body>
<form>
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <span id="s_username"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码"><br>
    <input type="submit" value="注册"><br>
</form>
<script>
    //在页面加载完成后给
    $(function (){
        //给username绑定blur事件
        $("#username").blur(function () {
            // alert("111");
            //获取username文本输入框的值
            var username = $(this).val();
            //发送ajax请求，期望服务器相应回来的饿数据格式：{"userExsit":true,"msg":"请换一个"}
            //                                      {"userExsit":false,"msg":"用户名可用"}
            $.get("fus",{username:username},function (data) {
                // alert(data)
                //判断userExsit键的值是否为true
                var span = $("#s_username");
                if(data.userExsit){
                    //用户名存在
                    span.css("color","red");
                    span.html(data.msg);
                }else{
                    //用户名不存在
                    span.css("color","green");
                    span.html(data.msg);
                }
            });
        });
    });
</script>
</body>
</html>