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概念
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了
相關文章
- 【PB案例學習筆記】-03使用者名稱密碼校驗筆記密碼
- 使用ajax方式驗證使用者名稱是否存在程式碼
- thinkphp中ajax使用者名稱校驗PHP
- ajax實現的驗證使用者名稱是否存在程式碼例項
- 【java web】--Ajax非同步判斷使用者名稱是否存在JavaWeb非同步
- Ajax傳值的初級學習（一）
- Ajax學習-Ajax簡介
- Java學習--JavaWeb簡介JavaWeb
- [譯]怎樣學習React—從初級到高階路線圖React
- JQuery+Ajax 使用JQuery完成非同步使用者名稱的校驗jQuery非同步
- Java工程師學習指南（初級篇）Java工程師
- Java工程師學習指南 初級篇Java工程師
- redis學習筆記（詳細）——高階篇Redis筆記
- PG學習初體驗--原始碼安裝和簡單命令原始碼
- 雲原生技術學習路線圖 初階+中階+高階
- 學習Grafana初級使用Grafana
- Entity Framework學習初級篇4--Entity SQLFrameworkSQL
- 簡單工廠、工廠模式初學習模式
- redis學習——高階功能Redis
- java學習路線-Java技術人員之路從初級到高階Java
- javaweb學習4JavaWeb
- Entity Framework 學習初級篇3-- LINQ TO EntitiesFramework
- 跟我一起學習C++ 之 初識名稱空間C++
- Haskell學習-高階函式Haskell函式
- MySql 學習之路-高階2MySql
- dubbo高階配置學習（上）
- 利用JS驗證使用者名稱是否合法JS
- OpenCV 名稱空間學習筆記OpenCV筆記
- 【 PHP 學習筆記 】名稱空間PHP筆記
- [ PHP 學習筆記 ] 名稱空間PHP筆記
- JavaWeb學習總結JavaWeb
- JavaWeb 學習筆記JavaWeb筆記
- JavaWeb學習筆記JavaWeb筆記
- javaweb學習路線JavaWeb
- 【強化學習篇】--強化學習案例詳解一強化學習
- 簡單學習jsJS
- Git簡單學習Git
- gin簡單學習