JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

目录

  • JQuery初级

    • 概念
    • 快速入门
    • JQuery对象和JS原生对象的区别
    • 选择器
    • DOM操作
      • 内容操作
      • 属性操作
      • CRUD操作
    • 案例

  • JQuery高级

    • 动画
    • 遍历
    • 事件绑定
    • 插件

  • Ajax

    • 概念
    • 实现方式
      • 原生JS实现(了解）
      • JQuery实现方式
        • $.ajax()
        • $.get()
        • $.post()

  • json

    • 概念
    • 语法
      • 基本规则
      • 获取数据
      • 遍历
    • json数据和Java对象、List、Map的相互转换

  • 校验用户名是否存在案例

开始

一、JQuery

1.1概念

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

JQuery是JavaScript的一个框架，简化js开发

宗旨是:write less do more

  • 优化了HTML文档的操作
  • 优化了事件处理
  • 优化了动画设计
  • 优化了Ajax交互

1.2快速入门

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

每个版本对应的有开发版本、生产版本（min）

  • 导入外部JQuery
  • 使用

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

1.3JQuery对象和JS原生对象的区别

原生方式获取的数组对象
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

JQ方式获取的数组对象
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

JQ可以直接 数组对象.html()

  • 缺省参数是获取标签体内容
  • 传入参数一键设置数组对象标签体内容，不用再向原生那样需要遍历设置

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

注意js对象的方法和JQ的方法是不通用的

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

因此我们将两者进行转换

  • js—>JQ对象：直接$(js对象)
  • JQ---->js对象：JQ对象[索引]或者 JQ对象.get(索引)

js----》JQ
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

JQ----》js
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

1.4选择器

筛选、获取具有相似特征的元素

  • 基本语法学习：
    • 事件绑定
    • 入口函数
    • 样式控制

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

需要注意的是上述只能写在<body>上面,如果想写在下面，就要使用预加载函数

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

注意：

相似功能的window.onload（）只能在页面定义一次，而JQ的可以出现多次

JQ结合CSS进行样式控制

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

  • JQ选择器：

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、
一些练习

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

1.5DOM操作

  • 内容操作
  • 属性操作
  • CRUD操作

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、
举栗

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

举栗

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

举栗
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

举栗

这里的remove()和empty(0可以使用对象调用自己删除自己

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

1.6案例

二、Ajax

2.1概念

ASynchronous JavaScript And XML 异步的JavaScript和XML

这个地方的同步合异步跟线程的关系并不大

此为建立在客户端和服务端通信的基础上的 同步和异步

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

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

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

1.2实现方式

  • 原生JS实现（了解）
  • JQuery实现方式
    • $.ajax()
    • $.get()
    • $.post()
1.2.1原生JS实现

固定格式的书写，可以查阅文档
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

接受并处理来自服务器的响应结果

那什么时候获取呢？需要看服务器响应是否完成，readyState的值为4，status的值为200，则接受结果

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

1.2.2JQuery实现
  • $.ajsx()发送异步请求
    参数是键值对

参数：

  • data 的值可以是url格式的，也可以写成json格式的
  • success 绑定回调函数，当成功请求后会自动执行绑定的函数
  • error 若出现错误的请求信息，会自动执行绑定的回调函数
  • dataType 设置响应的数据格式，一般指定为json格式
  • …

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

这种方式很简单，我们只需要找到对应功能的键来赋值添加实现借壳

常见的键功能：

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

  • $.get()更简单的方式发送异步请求
    只需传参就行，不需要键名，后面3个参数可选
    JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、
    JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

  • $.post()更简单的方式发送异步请求
    只需传参就行，不需要键名，后面3个参数可选

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

三、json

3.1概念

JavaScript Object Notation JavaScript的对象表示法

JavaScrupt 对象表示法，为了将JavaScript一些零散的数据，封装成一个对象，便于数据处理传输

常见格式：var p = {"name":"xiaosi","age":20}，

现在json有了更广泛的应用

  • 用于存储和交换文本信息的语法，类似于XML
  • 比XML更小、传输更快、更易于解析

3.2语法

3.2.1基本规则

花括号中可以套中括号（数组）、花括号

  • 对象中可以包含对象

  • 对象中可以放数组

  • 数组可以存放多个对象

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

3.2.2获取数据
  • 对象.键名
  • 对象["键名"]
  • 数组对象[索引]

从对象获取数据

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

从数组对象获取数据

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

从对象数组获取数据

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

3.2.3遍历json对象的数据

注意：

遍历取值的时候需要对象名[]，而不用对象名.key
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

对象数组的遍历

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

3.json数据和Java对象的相互转换

我们将来要做的是将json当做数据的载体 进行数据传输

这就涉及到客户端到服务器端的通信

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

JSON解析器：封装好的工具类，供我们使用，不用写那么多的代码了

常见的解析器：Jsonlib、Gson、fastjson、jackson(Spring内置的解析器)

3.1json转为Java对象

了解一下使用的不是很多

解析器jackson的使用步骤：

  • 导入jackson相关jar包
  • 创建jackson核心对象ObjectionMapper
  • 调用核对象的相关方法来转化：readValue(json字符串数据，Class)

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

3.2Java对象转化为json

解析器jackson的使用步骤：

  • 导入jackson相关jar包
  • 创建jackson核心对象ObjectionMapper
  • 调用核对象的相关方法来转化:writeValueAsString(对象)

domain.Person

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、
test.JacksonTest
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

注解的使用

  • @JsonIgnore忽略属性不转化
  • @JsonFormat按照指定格式转化（一般用于日期）

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

格式日期
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

复杂的 集合List转化—》得到数组

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

复杂的 集合Map转化—》得到对象

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

四、校验用户名是否存在案例

需求：当注册页面用户框失去焦点后，就去发送Ajax请求，验证用户名是否可用，并提示相关信息

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

  • register.html

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

  • FindUserServlet

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

一些问题：

  • 数据虽然响应回来，仅仅是一个字符串，通过json的方式获取不到返回的信息
  • 乱码问题

JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

在服务器端设置返回数据类型为json格式，就不用再客户端请求的时候设置dataType了
JavaWeb学习篇10_JQuery初级、高级、Ajax、json简单学习、校验用户名是否存在案例、

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode