Ajax-jqueryAjax 今天內容： 1、json數據結構(重點) 2、jquery的ajax操作（重點） 3、jquery的插件使用 一、json數據結構 1、什麼是json JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它基於ECMAScri ...
|
Ajax-jqueryAjax |
|
|
|
今天內容： |
|
1、json數據結構(重點) |
|
2、jquery的ajax操作（重點） |
|
3、jquery的插件使用 |
|
一、json數據結構 |
|
1、什麼是json |
|
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它基於ECMAScript的一個子集。 JSON採用完全獨立於語言的文本格式，但是也使用了類似於C語言家族的習慣。這些特性使JSON成 為理想的數據交換語言。易於人閱讀和編寫，同時也易於機器解析和生成(一般用於提升網路傳輸速率)。 |
|
2、json的數據格式 |
|
json的結構有兩種結構 |
|
第一種：對象結構： |
|
對象在js中表示為“{}”括起來的內容，數據結構為 {key：value,key：value,...}的鍵值對的結構， 在面向對象的語言中，key為對象的屬性，value為對應的屬性值，key的類型為字元串，value的 類型可以是 數字、字元串、數組、對象幾種。 |
|
示例：描述一個用戶 |
|
{"id":100,"username":"張三","age":28,"addr":"天津"} |
|
第二種：數組結構： |
|
數組在js中是中括弧“[]”括起來的內容，數據結構為 ["java","javascript","vb",...]，取值方式和 所有語言中一樣，使用索引獲取，欄位值的類型可以是 數字、字元串、數組、對象幾種。 |
|
註意：在實際開發中，對象結構和數組結構會相互嵌套，相互包含 |
|
3、json的轉換工具 |
|
在實際的開發中，我j們經常會使用json串作為數據傳輸的載體，例如瀏覽器端頁面中的js與服務 端的數據交互，android/ios移動端與服務端的數據交互都大量使用json，但發現使用java代碼 手動拼接json串是一個很耗時很繁瑣的事情，所以一批json的自動轉換的工具出現了。即可以自 動的將對象、數組、集合等轉換成json串，也可以將一個json串轉成對象、數組和集合。 |
|
常用的轉換工具： |
|
jsonlib：是一個java類庫，開發時需要導入6個jar包 |
|
commons-beanutils-1.8.3.jar |
|
Gson：google的產品 很多企業都在使用 |
|
FastJson：阿裡巴巴技術團隊的產品 號稱是最快的json轉換工具 |
|
二、jquery的ajax操作 |
|
查詢jquery的官方文檔發現與ajax相關的jquey方法如下： |
|
$.ajax([options]) |
|
1、jquery的ajax方法的分類 |
|
一般我們會將jquery的ajax方法習慣性的分為三種： |
|
第一種：原始方法 |
|
$.ajax([options]) ：jquery的ajax最底層的方法，可以認為其他的ajax的操作都是基於此方法的。 |
|
第二種：常用方法 |
|
load(url, [data], [callback]) ：對象調用的方法，可以是get請求也可以是post請求 |
|
$.get(url, [data], [fn], [type]) ：get提交方式 |
|
$.post(url, [data], [fn], [type]) ：post提交方式 |
|
第三種：高級方法 |
|
$.getJSON(url, [data], [fn]) |
|
$.getScript(url, [callback]) |
|
2、jquery的ajax方法的參數 |
|
以上的方法的參數大都是重覆的，分為如下幾個： |
|
url：請求提交的伺服器路徑 ---- xmlhttp.open("post","url") |
|
data：向伺服器端提交的數據 ----xmlhttp.send(data); |
|
callback/fn：ajax請求返回後的回調函數 --- xmlhttp.onreadystatechenge = function(){} |
|
回調函數的參數有三個： |
|
data：返回值 |
|
info：執行信息(成功或失敗的信息) |
|
xmlhttprequest：ajax引擎對象 |
|
type：返回的數據類型 xml, html, script, json, text, _default ----- xmlhttp.responsTest; xmlhttp.responseXML; |
|
options：是一個json格式的參數集合 |
|
3、load方法 |
|
load(url, [data], [callback]) |
|
註意點：(1) 此方法是所有ajax操作方法中唯一對象調用的方法，其他都是全局方法 |
|
(2) 如果提交時攜帶了請求參數(json數據格式或key/value字元串)，即data部分存在 即為post提交，data部分不存在即為get提交 |
|
(3) 在將json轉換成json格式對象時的格式是 eval("("+json+")"); 原因是：eval本身 的問題。 由於json是以”{}”的方式來開始以及結束的，在JS中，它會被當成一個語 句塊來處理，所以必須強制性的將它轉換成一種表達式。 |
|
|
|
4、$.get方法 |
|
$.get(url, [data], [fn], [type]) ：get提交方式 |
|
|
5、$.post方法 |
|
$.post(url, [data], [fn], [type]) |
|
與get提交方法相同 只不過的提交方式是post |
|
6、$.ajax方法 |
|
$.ajax([options]) |
|
options是一個json格式的對象，參數是通過鍵值對的形式存在的 |
|
常用的參數如下： |
|
async：(預設: true) 預設設置下，所有請求均為非同步請求。如果需要發送同步請求，請將此 選項設置為 false。註意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。 |
|
data：發送到伺服器的數據。將自動轉換為請求字元串格式。GET 請求中將附加在 URL 後。 |
|
dataType：預期伺服器返回的數據類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，比如application/json 會自動認為是json類型 |
|
type：提交方式，get提交或post提交 |
|
url：提交伺服器路徑 |
|
success：成功後的回調函數 |
|
error：失敗後的回調函數 |
|
|
7、表單序列化 |
|
如果想讓表單通過ajax非同步提交，那麼首先我們要通過js獲取到每個表單中輸入的值，如果表單項 比較多的話，想必又是一件很麻煩，很痛苦的事情，那麼我們可以通過jquery的表單序列化的操作 將表單的數據拼接成提交的參數格式 即：name=value&name=value&name=value 或者 json格式對象 |
|
例如：表單如下： |
|
|
使用serialize方法 |
|
js代碼： |
|
|
列印結果↑↑↑↑↑
|
|
三、jquery的插件 |
|
網路上有許多成熟的插件共使用者參考，插件就是將jquery實現的常用操作進行封裝，封裝後的 小框架就可以叫做插件，按照插件的語法去操作可以實現很多複雜的功能，而這些複雜功能的背 後實現我們可以不必懂。 |
|
表單校驗插件 |
|
導入插件的步驟： |
|
(1) 將jquery的原始文件和插件文件jquery.validate.js導入到工程中 |
|
(2) 編寫js代碼對錶單進行驗證 |
|
表單驗證的格式： |
|
$("form表單的選擇器").validate(json數據格式); //鍵值對 鍵：值（{}） |
|
json數據格式： |
|
{
rules:{
表單項name值:校驗規則，
表單項name值:校驗規則... ...
},
messages:{
表單項name值:錯誤提示信息，
表單項name值:錯誤提示信息... ...
}
}
|
|
其中：校驗規則，可以是一個也可以是多個，如果是多個使用json格式 |
|
常用校驗規則如下： |
|
|
註意：當錯誤提示信息不按照我們預想的位置顯示時，我們可以按照如下方式進行設置 |
|
自定義錯誤顯示標簽放在我們需要顯示的位置，當此表單項驗證不通過時會將此 |
|
<lable for="html元素name值" class="error" style="display:none">錯誤信息</lable> |
|
如果設置了錯誤
|
