[jQuery] Ajax
目錄
我們很常使用 AJAX 技術，讀寫 Server 端的資料。它是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。☞ jQuery.ajax()
〈1〉基礎參數
| 參數 | 說明 |
|---|---|
| type | Type: String 請求方式，POST/GET |
| url | Type: String 指定要進行呼叫的位址 |
| data | Type: PlainObject or String or Array ■ 傳送至Server的資料，會自動轉為query string的型式，如果是GET請求還會幫你附加到URL。 ■ 可用processData選項禁止此自動轉換。 ■ 物件型式則為一Key/Value pairs。 ■ 使用serialize()，整個form裡面的DOM都可以一次傳過去，而且特殊資料也不會被截斷，蠻好用的一個小技巧，型態的部分要看type的設定，一般表單都是用POST或是GET |
| success | Type: Function 請求成功時，要執行的函式 |
| error | Type: Function 請求失敗時，要執行的函式 |
〈2〉進階參數
| 參數 | 說明 |
|---|---|
| dataType | Type: String Server回傳的資料類型，如果沒指定，jQuery會根據HTTP MIME Type自動選擇以responseXML或responseText傳入你的success callback。 可選的資料類型有： json：傳回JSON text：傳回純文字字串。 html：傳回HTML，包含jQuery會自動幫你處理的script tags。 xml：傳回可用jQuery處理的XML script：傳回可執行的JavaScript。(script不會被自動cache，除非cache設為true) jsonp：在URL加上?callback =?參數，並在Server端配合送回此jsonp callback。 |
| async | Type: Boolean ■ 預設為 true，啟動非同步方法。也就是說並不會等 $.ajax 執行完成才 return ，而是一開始就直接 return 了 ■ 我們很常會跟 Server 端請求資料，然後依據返回的值執行不同的結果。因此，我們可以將 async 設成 false，採用同步的方法來請求 |
| cache | Type: Boolean ■ 預設為 true ■ 如果要避免抓回來都是舊的資料，還是把 cache 設為 false If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET. |
| .done | Promise callbacks：the success callback option ■ .done(function(){ // 當都成功時執行... }) ■ 當所有的ajax無誤的完成時，可以調用done callback |
| .fail | Promise callbacks：the error callback option, the .fail() method replaces the deprecated .error() method. ■ .fail(function(){ // 處理失敗的事物... }) ■ ajax之中若有任一失敗，可以調用 fail callback |
〈3〉Sample code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title of the document</title>
<link href="bootstrap-3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<!-- 輸入 -->
<div class="row">
<div class="col-md-12">
<h3><i class="fa fa-modx"></i> AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。</h3>
<div class="input-group">
<input type="text" class="form-control" id="search" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="trigger">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /col -->
</div><!-- /row -->
<br/>
<!-- 輸出 -->
<div class="row">
<div class="col-md-12" id="result">
</div>
</div><!-- /row -->
</div><!-- /container -->
<script src="jquery-2.1.4/jquery.min.js"></script>
<script src="bootstrap-3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$( "#trigger" ).click(function() {
var search = $('#search').val();
$.ajax({
url: "demo.txt",
success: function(data) {
$("#result").html(
"<div class='panel panel-default'><div class='panel-body'>" +
"<h2>您輸入..." + search + "</h2>" +
data +
"</div></div>");
},
error: function() {
$('#result').text('An error occurred');
}
});
//ajax end
});
});
</script>
</body>
</html>
demo.txt
<h3>jQuery and AJAX is FUN!!!</h3> <p>資料來源：</p> <ul> <li><a href='http://www.w3schools.com/JQuery/ajax_ajax.asp' target='_blank'>jQuery ajax() Method</a></li> <li><a href='http://www.w3schools.com/jquery/jquery_ajax_load.asp' target='_blank'>jQuery - AJAX load() Method</a></li> <li><a href='http://getbootstrap.com/getting-started/' target='_blank'>Hello, Bootstrap!</a></li> </ul>
Source
☞ 分享你的 Coding 新鮮事 | [jQuery][筆記] 小心使用 Ajax 防止 Bug 產生☞ Leo's Blog | [jQuery] 使用Serialize post data
☞ W3School | jQuery ajax - serialize() 方法
☞ 四處流浪的阿基。I am Vagrant Walker | [程式][JQuery] JQuery中的Ajax的基礎運用。提供範例程式下載。
☞ formvalidation.io | Using Ajax to submit the form
☞ jQuery AJAX Form Submit Example
☞ jQuery Form Plugin
沒有留言: