JavaWeb學習篇10_JQuery初級、高階、Ajax、json簡單學習、校驗使用者名稱是否存在案例、

Linus_xiaosi發表於2020-11-11
JavaWebjQueryJSON

目錄

  • JQuery初級

    • 概念
    • 快速入門
    • JQuery物件和JS原生物件的區別
    • 選擇器
    • DOM操作
      • 內容操作
      • 屬性操作
      • CRUD操作
    • 案例

  • JQuery高階

    • 動畫
    • 遍歷
    • 事件繫結
    • 外掛

  • Ajax

    • 概念
    • 實現方式
      • 原生JS實現(瞭解）
      • JQuery實現方式
        • $.ajax()
        • $.get()
        • $.post()

  • json

    • 概念
    • 語法
      • 基本規則
      • 獲取資料
      • 遍歷
    • json資料和Java物件、List、Map的相互轉換

  • 校驗使用者名稱是否存在案例

開始

一、JQuery

1.1概念

在這裡插入圖片描述

JQuery是JavaScript的一個框架，簡化js開發

宗旨是:write less do more

  • 優化了HTML文件的操作
  • 優化了事件處理
  • 優化了動畫設計
  • 優化了Ajax互動

1.2快速入門

在這裡插入圖片描述

每個版本對應的有開發版本、生產版本（min）

  • 匯入外部JQuery
  • 使用

在這裡插入圖片描述

1.3JQuery物件和JS原生物件的區別

原生方式獲取的陣列物件
在這裡插入圖片描述

JQ方式獲取的陣列物件
在這裡插入圖片描述

JQ可以直接 陣列物件.html()

  • 預設引數是獲取標籤體內容
  • 傳入引數一鍵設定陣列物件標籤體內容，不用再向原生那樣需要遍歷設定

在這裡插入圖片描述

注意js物件的方法和JQ的方法是不通用的

在這裡插入圖片描述

因此我們將兩者進行轉換

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

js----》JQ
在這裡插入圖片描述

JQ----》js
在這裡插入圖片描述

1.4選擇器

篩選、獲取具有相似特徵的元素

  • 基本語法學習：
    • 事件繫結
    • 入口函式
    • 樣式控制

在這裡插入圖片描述

需要注意的是上述只能寫在<body>上面,如果想寫在下面，就要使用預載入函式

在這裡插入圖片描述

注意：

相似功能的window.onload（）只能在頁面定義一次，而JQ的可以出現多次

JQ結合CSS進行樣式控制

在這裡插入圖片描述

  • JQ選擇器：

在這裡插入圖片描述
一些練習

在這裡插入圖片描述

1.5DOM操作

  • 內容操作
  • 屬性操作
  • CRUD操作

在這裡插入圖片描述
舉慄

在這裡插入圖片描述

在這裡插入圖片描述

舉慄

在這裡插入圖片描述
在這裡插入圖片描述

舉慄
在這裡插入圖片描述
在這裡插入圖片描述

舉慄

這裡的remove()和empty(0可以使用物件呼叫自己刪除自己

在這裡插入圖片描述

1.6案例

二、Ajax

2.1概念

ASynchronous JavaScript And XML 非同步的JavaScript和XML

這個地方的同步合非同步跟執行緒的關係並不大

此為建立在客戶端和服務端通訊的基礎上的 同步和非同步

在這裡插入圖片描述

  • 同步：客戶端必須等待伺服器端的響應，在等待的期間客戶端不能做其他操作
  • 非同步：客戶端不需要等待服務端的響應，在伺服器處理請求的過程中，客戶端可以進行其他的操作

在這裡插入圖片描述

1.2實現方式

  • 原生JS實現（瞭解）
  • JQuery實現方式
    • $.ajax()
    • $.get()
    • $.post()
1.2.1原生JS實現

固定格式的書寫，可以查閱文件
在這裡插入圖片描述
在這裡插入圖片描述

接受並處理來自伺服器的響應結果

那什麼時候獲取呢？需要看伺服器響應是否完成，readyState的值為4，status的值為200，則接受結果

在這裡插入圖片描述

1.2.2JQuery實現
  • $.ajsx()傳送非同步請求
    引數是鍵值對

引數：

  • data 的值可以是url格式的，也可以寫成json格式的
  • success 繫結回撥函式，當成功請求後會自動執行繫結的函式
  • error 若出現錯誤的請求資訊，會自動執行繫結的回撥函式
  • dataType 設定響應的資料格式，一般指定為json格式
  • …

在這裡插入圖片描述

這種方式很簡單，我們只需要找到對應功能的鍵來賦值新增實現借殼

常見的鍵功能：

在這裡插入圖片描述

  • $.get()更簡單的方式傳送非同步請求
    只需傳參就行，不需要鍵名，後面3個引數可選
    在這裡插入圖片描述
    在這裡插入圖片描述

  • $.post()更簡單的方式傳送非同步請求
    只需傳參就行，不需要鍵名，後面3個引數可選

在這裡插入圖片描述

三、json

3.1概念

JavaScript Object Notation JavaScript的物件表示法

JavaScrupt 物件表示法，為了將JavaScript一些零散的資料，封裝成一個物件，便於資料處理傳輸

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

現在json有了更廣泛的應用

  • 用於儲存和交換文字資訊的語法，類似於XML
  • 比XML更小、傳輸更快、更易於解析

3.2語法

3.2.1基本規則

花括號中可以套中括號（陣列）、花括號

  • 物件中可以包含物件

  • 物件中可以放陣列

  • 陣列可以存放多個物件

在這裡插入圖片描述
在這裡插入圖片描述

3.2.2獲取資料
  • 物件.鍵名
  • 物件["鍵名"]
  • 陣列物件[索引]

從物件獲取資料

在這裡插入圖片描述

從陣列物件獲取資料

在這裡插入圖片描述

從物件陣列獲取資料

在這裡插入圖片描述

3.2.3遍歷json物件的資料

注意：

遍歷取值的時候需要物件名[]，而不用物件名.key
在這裡插入圖片描述

物件陣列的遍歷

在這裡插入圖片描述

3.json資料和Java物件的相互轉換

我們將來要做的是將json當做資料的載體 進行資料傳輸

這就涉及到客戶端到伺服器端的通訊

在這裡插入圖片描述

JSON解析器：封裝好的工具類，供我們使用，不用寫那麼多的程式碼了

常見的解析器：Jsonlib、Gson、fastjson、jackson(Spring內建的解析器)

3.1json轉為Java物件

瞭解一下使用的不是很多

解析器jackson的使用步驟：

  • 匯入jackson相關jar包
  • 建立jackson核心物件ObjectionMapper
  • 呼叫核物件的相關方法來轉化：readValue(json字串資料，Class)

在這裡插入圖片描述

3.2Java物件轉化為json

解析器jackson的使用步驟：

  • 匯入jackson相關jar包
  • 建立jackson核心物件ObjectionMapper
  • 呼叫核物件的相關方法來轉化:writeValueAsString(物件)

domain.Person

在這裡插入圖片描述
test.JacksonTest
在這裡插入圖片描述

在這裡插入圖片描述

註解的使用

  • @JsonIgnore忽略屬性不轉化
  • @JsonFormat按照指定格式轉化（一般用於日期）

在這裡插入圖片描述

在這裡插入圖片描述

格式日期
在這裡插入圖片描述

複雜的 集合List轉化—》得到陣列

在這裡插入圖片描述

複雜的 集合Map轉化—》得到物件

在這裡插入圖片描述

四、校驗使用者名稱是否存在案例

需求：當註冊頁面使用者框失去焦點後，就去傳送Ajax請求，驗證使用者名稱是否可用，並提示相關資訊

在這裡插入圖片描述

  • register.html

在這裡插入圖片描述
在這裡插入圖片描述

  • FindUserServlet

在這裡插入圖片描述

一些問題：

  • 資料雖然響應回來，僅僅是一個字串，通過json的方式獲取不到返回的資訊
  • 亂碼問題

在這裡插入圖片描述
在這裡插入圖片描述

在伺服器端設定返回資料型別為json格式，就不用再客戶端請求的時候設定dataType了
在這裡插入圖片描述

相關文章