Ajax 之 [ jQuery中的Ajax ]
阿新 • • 發佈：2018-12-09
jQuery中的Ajax
在jQuery中使用Ajax
-
在jQuery提供了一系列的方法來對Ajax進行操作
- load()方法
- $.get()方法
- $.post()方法
- ajax()方法
- $.getScript()方法
- $.getJSON()方法
load()方法
-
引數
- 第一個引數 - 表示非同步互動的請求地址
-
第二個引數 - 表示非同步互動的請求資料
- 省略請求資料時，當前的請求方式為 GET
- 傳送請求資料時，當前的請求方式為 POST
- 第三個引數 - 表示非同步互動請求成功後的回撥函式
-
該方法具有返回值
- 伺服器端的響應結果
注意
- 會自動將返回結果寫到HTML頁面的指定目標元素中
示例程式碼
<body> <button id="btn">按鈕</button> <script src="chajian/jquery.js"></script> <script> var $btn = $( '#btn' ); $btn.click( function () { $btn.load( 'JSON.json', {name:'融念冰'}, function () { console.log( '三步白頭' ); } ); } ); </script> </body>
$.get()方法
- 該方法的請求方式為 GET
-
引數
- 第一個引數 - 表示非同步互動的請求地址
- 第二個引數 - 表示非同步互動的請求資料
-
第三個引數 - 表示非同步互動請求成功後的回撥函式
- response引數 - 表示獲取當前的JSON檔案內容
-
第四個引數 - 表示設定伺服器端響應結果的格式
- xml、html、script、json、text等
示例程式碼
<body> <button id="btn">按鈕</button> <script src="chajian/jquery.js"></script> <script> var $btn = $( '#btn' ); $btn.click( function () { $.get( 'JSON.json', {name:'融念冰'}, function ( response ) { console.log( response ); }, 'json' ); </script> </body>
$.post()方法
- 該方法的請求方式為 POST
-
引數
- 第一個引數 - 表示非同步互動的請求地址
- 第二個引數 - 表示非同步互動的請求資料
-
第三個引數 - 表示非同步互動請求成功後的回撥函式
- response引數 - 表示獲取當前的JSON檔案內容
-
第四個引數 - 表示設定伺服器端響應結果的格式
- xml、html、script、json、text等
示例程式碼
<body>
<button id="btn">按鈕</button>
<script src="chajian/jquery.js"></script>
<script>
var $btn = $( '#btn' );
$btn.click( function () {
$.post( 'JSON.json', {name:'融念冰'}, function ( response ) {
console.log( response );
}, 'json' );
} );
</script>
</body>ajax()方法
-
引數
- 第一個引數 - 表示非同步互動請求的地址
-
第二個引數 - 表示設定非同步互動請求的
- 該引數的可選項
- type - 設定當前的請求方式
- data - 傳送給伺服器端的請求資料
- dataType - 伺服器端響應結果的格式
-
success - 非同步互動請求成功後的回撥函式
-
回撥函式的引數
- data - 表示伺服器端響應的結果
- textStatus - 表示伺服器端當前的狀態
- jqXHR - Ajax中的核心物件
-
示例程式碼
<body>
<button id="btn">按鈕</button>
<script src="chajian/jquery.js"></script>
<script>
var $btn = $( '#btn' );
$btn.click( function () {
$.ajax( 'JSON.json', {
type : 'get',
dataType : 'text',
success : function( data ) {
console.log( data );
}
} );
} );
</script>
</body>$.getScript()方法
- 該方法的請求方式為 GET
-
引數
- 第一個引數 - 表示請求JavaScript檔案的地址
-
第二個引數 - 指定JavaScript檔案載入成功的回撥函式
- 該回調函式的引數
- data - 表示獲取指定檔案的內容
示例程式碼
<body>
<button id="btn">按鈕</button>
<script src="chajian/jquery.js"></script>
<script>
var $btn = $( '#btn' );
$btn.click( function () {
$.getScript( 'JS.js', function( data ) {
console.log( data );
eval( data );
} );
} );
</script>
</body>$.getJSON()方法
- 該方法的請求方式為 GET
-
引數
- 第一個引數 - 表示請求JavaScript檔案的地址
- 第二個引數 - 表示傳送給伺服器端的資料內容
-
第三個引數 - 指定JavaScript檔案載入成功的回撥函式
- 該回調函式的引數
- data - 表示獲取指定檔案的內容
示例程式碼
<body>
<button id="btn">按鈕</button>
<script src="chajian/jquery.js"></script>
<script>
var $btn = $( '#btn' );
$btn.click( function () {
$.getJSON( 'JS.js',{name:'唐三'}, function( data ) {
console.log( data );
} );
} );
</script>
</body>非同步提交表單
<body>
<form action="#">
<input type="text" id="name">
<input type="submit">
</form>
<script src="chajian/jquery.js"></script>
<script>
var $form = $( 'form' );
$form.bind( 'submit', function( event ) {
// 通過事件屬性來阻止表單提交的預設行為
event.preventDefault();
// 通過val()方法來獲取表單元件的資料內容
var name = $( '#name' ).val();
// 構建傳送給伺服器端的資料格式
var data = 'name=' + name;
// 通過非同步互動提交表單
$.post( 'JSON.json', data, function( response ) {
console.log( response );
} );
} );
</script>
</body>表單序列化
- 根據表單默認同步提交獲取資料的方式
serialize()方法
- 將資料內容序列化為指定格式的字串內容
serializeArray()方法
- 將資料內容序列化為JSON格式的資料內容
示例程式碼
<body>
<form action="#">
<input type="text" name="username" id="name">
<input type="text" name="password" id="pwd">
<input type="submit">
</form>
<script src="chajian/jquery.js"></script>
<script>
var $form = $( 'form' );
$form.bind( 'submit', function( event ) {
// 阻止預設行為
event.preventDefault();
/*
根據表單默認同步提交獲取資料的方式
* serialize()方法
* 將資料內容序列化為指定格式的字串內容
* serializeArray()方法
* 將資料內容序列化為JSON格式的資料內容
*/
// var data = $form.serialize();
var data = $form.serializeArray();
console.log(data);
// 3.通過非同步互動提交表單
$.post( 'JSON.json', data, function( response ) {
console.log( response );
} );
} );
</script>
</body>