jQuery 中 $.ajax $.get $.post $.getJSON $.getScript 各種用法說明
什麼是 AJAX？
AJAX = Asynchronous JavaScript and XML.
AJAX 是一種新增快速動態網頁的技術。
AJAX 通過在後台與伺服器交換少量資料的方式，允許網頁進行異步更新。這意味著有可能在不重載整個頁面的情況下，對網頁的一部分進行更新。
AJAX 和 jQuery
jQuery 提供了用於 AJAX 開發的豐富函式（方法）庫。
通過 jQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以從遠端伺服器請求 TXT、HTML、XML 或 JSON。
而且您可以直接把遠端資料載入網頁的被選 HTML 元素中！
寫的更少，做的更多
jQuery 的 load 函式是一種簡單的（但很強大的）AJAX 函式。它的語法如下：
$(selector).load(url,data,callback)
請使用 selector 來定義要改變的 HTML 元素，使用 url 參數來指定資料的 web 地址。
親自試一試
只有當您希望向伺服器發送資料時，才需要使用 data 參數。只有當您需要在執行完畢之後觸發一個函式時，您才需要使用 callback 參數。
Low Level AJAX
$.ajax(options) 是低層級 AJAX 函式的語法。
$.ajax 提供了比高層級函式更多的功能，但是同時也更難使用。
option 參數設置的是 name|value 對，定義 url 資料、密碼、資料類型、過濾器、字元集、超時以及錯誤函式。
jQuery AJAX 請求
請求 描述
$(selector).load(url,data,callback) 把遠端資料加載到被選的元素中
$.ajax(options) 把遠端資料加載到 XMLHttpRequest 物件中
$.get(url,data,callback,type) 使用 HTTP GET 來加載遠端資料
$.post(url,data,callback,type) 使用 HTTP POST 來加載遠端資料
$.getJSON(url,data,callback) 使用 HTTP GET 來加載遠端 JSON 資料
$.getScript(url,callback) 加載並執行遠端的 JavaScript 文件
(url) 被加載的資料的 URL（地址）
(data) 發送到伺服器的資料的鍵/值物件
(callback) 當資料被加載時，所執行的函式
(type) 被返回的資料的類型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 請求的所有鍵/值對選項
講了這麼多我再來看看範例
$.ajax範例
//1.$.ajax帶json資料的異步請求
var aj = $.ajax( {
url:'productManager_reverseUpdate',// 跳轉到 action
data:{
selRollBack : selRollBack,
selOperatorsCode : selOperatorsCode,
PROVINCECODE : PROVINCECODE,
pass2 : pass2
},
type:'post',
cache:false,
dataType:'json',
success:function(data) {
if(data.msg =="true" ){
// view("修改成功！");
alert("修改成功！");
window.location.reload();
}else{
view(data.msg);
}
},
error : function() {
// view("異常！");
alert("異常！");
}
});
//2.$.ajax序列化表格內容為字串的異步請求
function noTips(){
var formParam = $("#form1").serialize();//序列化表格內容為字串
$.ajax({
type:'post',
url:'Notice_noTipsNotice',
data:formParam,
cache:false,
dataType:'json',
success:function(data){
}
});
}
//3.$.ajax 串接 url 的異步請求
var yz=$.ajax({
type:'post',
url:'validatePwd2_checkPwd2?password2='+password2,
data:{},
cache:false,
dataType:'json',
success:function(data){
if( data.msg =="false" ) // 伺服器返回false，就將validatePassword2的值改為pwd2Error，這是異步，需要考慮返回時間
{
textPassword2.html("<font color='red'>業務密碼不正確！</font>");
$("#validatePassword2").val("pwd2Error");
checkPassword2 = false;
return;
}
},
error:function(){}
});
//4.$.ajax 串接 data 的異步請求
$.ajax({
url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',
type:'post',
data:'merName='+values,
async : false, // 預設為true 異步
error:function(){
alert('error');
},
success:function(data){
$("#"+divs).html(data);
}
});
jquery.get範例
jquery.get( url, [ data ], [ callback(data, textstatus, xmlhttprequest) ], [ datatype ] )
returns: xmlhttprequest
url 字串，其中包含的url的請求被發送。
data 地圖或字串發送到與請求的伺服器。
callback(data, textstatus, xmlhttprequest)，如果請求成功執行。
datatypethe 類型的資料預計從伺服器。
這是一個縮寫的ajax功能，這相當於：
$.ajax({
url: url,
data: data,
success: success,
datatype: datatype
});
呼叫函式成功返回的資料傳遞，這將是一個xml根元素，文本字串，網頁特效文件，或根據響應的mime類型的json物件。它也通過了響應文本狀態。
在jquery 1.4，成功回呼函式也是通過xmlhttprequest物件。
大多數實現將指定一個成功的處理程式：
$.get('ajax/test.html', function(data) {
$('.result').html(data);
alert('load was performed.');
});
jQuery.post範例
jQuery.post( url, [data], [callback], [type] ) ：
使用POST方式來進行異步請求
參數：
url (String) : 發送請求的URL地址.
data (Map) : (可選) 要發送給伺服器的資料，以 Key/value 的鍵值對形式表示。
callback (Function) : (可選) 載入成功時回調函式(只有當Response的返回狀態是success才是呼叫該方法)。
type (String) : (可選)官方的說明是：Type of data to be sent。其實應該為客戶端請求的類型(JSON,XML,等等)
1.html頁面（index.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript" src='#'" /jquery-1.3.2.js"></script>
<script language="javascript">
function checkemail(){
if($('#email').val() == ""){
$('#msg').html("please enter the email!");
$('#email').focus;
return false;
}
if($('#address').val() == ""){
$('#msg').html("please enter the address!");
$('#address').focus;
return false;
}
ajax_post();
}
function ajax_post(){
$.post("action.php",{email:$('#email').val(),address:$('#address').val()},
function(data){
//$('#msg').html("please enter the email!");
//alert(data);
$('#msg').html(data);
},
"text");//這裡返回的類型有：json,html,xml,text
}
</script>
</head>
<body>
<form id="ajaxform" name="ajaxform" method="post" action="action.php">
<p>
email<input type="text" name="email" id="email"/>
</p>
<p>
address<input type="text" name="address" id="address"/>
</p>
<p id="msg"></p>
<p>
<input name="Submit" type="button" value="submit" onclick="return checkemail()"/>
</p>
</form>
</body>
</html>
2.php頁面(action.php)
<?php
$email = $_POST["email"];
$address = $_POST["address"];
//echo $email;
//echo $address;
echo "success";
?>
jquery.getjson範例
jquery.getjson( url, [ data ], [ callback(data, textstatus) ] )
url 一個字串，其中包含的url，該請求被發送。
data 地圖或字串，發送到與請求的伺服器
callback(data, textstatus) 回調函式是執行，如果請求成功。
看一個簡單的範例
$.ajax({
url: url,
datatype: 'json',
data: data,
success: callback
});
回調是通過返回的資料，這將是一個網頁特效物件或陣列的定義和解析json結構使用$。parsejson（）方法。
大多數實現將指定一個成功的處理程式：
$.getjson('ajax/test.json', function(data) {
$('.result').html('<p>' + data.foo + '</p>'
+ '<p>' + data.baz[1] + '</p>');
});
這個例子，當然，依賴於json文件結構：
{
"foo": "the quick brown fox jumps教程 over the lazy dog.",
"bar": "abcdefg",
"baz": [52, 97]
}
<!doctype html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="images">
</div>
<script>$.getjson("/?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendto("#images");
if ( i == 3 ) return false;
});
});</script>
</body>
</html>>
jquery $.getScript範例
該函式是簡寫的 Ajax 函式，等價於：
$.ajax({
url: url,
dataType: "script",
success: success
});
這裡的回呼函式會傳入返回的 JavaScript 文件。這通常不怎麼有用，因為那時scripts已經執行了。
載入的scripts在全域環境中執行，因此能夠引用其他變數，並使用 jQuery 函式。
比如加載一個 test.js 文件，裡邊包含下面這段程式碼：
$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");
通過引用該文件名，就可以載入並執行這段scripts：
$.getScript("ajax/test.js", function() {
alert("Load was performed.");
});
AJAX = Asynchronous JavaScript and XML.
AJAX 是一種新增快速動態網頁的技術。
AJAX 通過在後台與伺服器交換少量資料的方式，允許網頁進行異步更新。這意味著有可能在不重載整個頁面的情況下，對網頁的一部分進行更新。
AJAX 和 jQuery
jQuery 提供了用於 AJAX 開發的豐富函式（方法）庫。
通過 jQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以從遠端伺服器請求 TXT、HTML、XML 或 JSON。
而且您可以直接把遠端資料載入網頁的被選 HTML 元素中！
寫的更少，做的更多
jQuery 的 load 函式是一種簡單的（但很強大的）AJAX 函式。它的語法如下：
$(selector).load(url,data,callback)
請使用 selector 來定義要改變的 HTML 元素，使用 url 參數來指定資料的 web 地址。
親自試一試
只有當您希望向伺服器發送資料時，才需要使用 data 參數。只有當您需要在執行完畢之後觸發一個函式時，您才需要使用 callback 參數。
Low Level AJAX
$.ajax(options) 是低層級 AJAX 函式的語法。
$.ajax 提供了比高層級函式更多的功能，但是同時也更難使用。
option 參數設置的是 name|value 對，定義 url 資料、密碼、資料類型、過濾器、字元集、超時以及錯誤函式。
jQuery AJAX 請求
請求 描述
$(selector).load(url,data,callback) 把遠端資料加載到被選的元素中
$.ajax(options) 把遠端資料加載到 XMLHttpRequest 物件中
$.get(url,data,callback,type) 使用 HTTP GET 來加載遠端資料
$.post(url,data,callback,type) 使用 HTTP POST 來加載遠端資料
$.getJSON(url,data,callback) 使用 HTTP GET 來加載遠端 JSON 資料
$.getScript(url,callback) 加載並執行遠端的 JavaScript 文件
(url) 被加載的資料的 URL（地址）
(data) 發送到伺服器的資料的鍵/值物件
(callback) 當資料被加載時，所執行的函式
(type) 被返回的資料的類型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 請求的所有鍵/值對選項
講了這麼多我再來看看範例
$.ajax範例
//1.$.ajax帶json資料的異步請求
var aj = $.ajax( {
url:'productManager_reverseUpdate',// 跳轉到 action
data:{
selRollBack : selRollBack,
selOperatorsCode : selOperatorsCode,
PROVINCECODE : PROVINCECODE,
pass2 : pass2
},
type:'post',
cache:false,
dataType:'json',
success:function(data) {
if(data.msg =="true" ){
// view("修改成功！");
alert("修改成功！");
window.location.reload();
}else{
view(data.msg);
}
},
error : function() {
// view("異常！");
alert("異常！");
}
});
//2.$.ajax序列化表格內容為字串的異步請求
function noTips(){
var formParam = $("#form1").serialize();//序列化表格內容為字串
$.ajax({
type:'post',
url:'Notice_noTipsNotice',
data:formParam,
cache:false,
dataType:'json',
success:function(data){
}
});
}
//3.$.ajax 串接 url 的異步請求
var yz=$.ajax({
type:'post',
url:'validatePwd2_checkPwd2?password2='+password2,
data:{},
cache:false,
dataType:'json',
success:function(data){
if( data.msg =="false" ) // 伺服器返回false，就將validatePassword2的值改為pwd2Error，這是異步，需要考慮返回時間
{
textPassword2.html("<font color='red'>業務密碼不正確！</font>");
$("#validatePassword2").val("pwd2Error");
checkPassword2 = false;
return;
}
},
error:function(){}
});
//4.$.ajax 串接 data 的異步請求
$.ajax({
url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',
type:'post',
data:'merName='+values,
async : false, // 預設為true 異步
error:function(){
alert('error');
},
success:function(data){
$("#"+divs).html(data);
}
});
jquery.get範例
jquery.get( url, [ data ], [ callback(data, textstatus, xmlhttprequest) ], [ datatype ] )
returns: xmlhttprequest
url 字串，其中包含的url的請求被發送。
data 地圖或字串發送到與請求的伺服器。
callback(data, textstatus, xmlhttprequest)，如果請求成功執行。
datatypethe 類型的資料預計從伺服器。
這是一個縮寫的ajax功能，這相當於：
$.ajax({
url: url,
data: data,
success: success,
datatype: datatype
});
呼叫函式成功返回的資料傳遞，這將是一個xml根元素，文本字串，網頁特效文件，或根據響應的mime類型的json物件。它也通過了響應文本狀態。
在jquery 1.4，成功回呼函式也是通過xmlhttprequest物件。
大多數實現將指定一個成功的處理程式：
$.get('ajax/test.html', function(data) {
$('.result').html(data);
alert('load was performed.');
});
jQuery.post範例
jQuery.post( url, [data], [callback], [type] ) ：
使用POST方式來進行異步請求
參數：
url (String) : 發送請求的URL地址.
data (Map) : (可選) 要發送給伺服器的資料，以 Key/value 的鍵值對形式表示。
callback (Function) : (可選) 載入成功時回調函式(只有當Response的返回狀態是success才是呼叫該方法)。
type (String) : (可選)官方的說明是：Type of data to be sent。其實應該為客戶端請求的類型(JSON,XML,等等)
1.html頁面（index.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript" src='#'" /jquery-1.3.2.js"></script>
<script language="javascript">
function checkemail(){
if($('#email').val() == ""){
$('#msg').html("please enter the email!");
$('#email').focus;
return false;
}
if($('#address').val() == ""){
$('#msg').html("please enter the address!");
$('#address').focus;
return false;
}
ajax_post();
}
function ajax_post(){
$.post("action.php",{email:$('#email').val(),address:$('#address').val()},
function(data){
//$('#msg').html("please enter the email!");
//alert(data);
$('#msg').html(data);
},
"text");//這裡返回的類型有：json,html,xml,text
}
</script>
</head>
<body>
<form id="ajaxform" name="ajaxform" method="post" action="action.php">
<p>
email<input type="text" name="email" id="email"/>
</p>
<p>
address<input type="text" name="address" id="address"/>
</p>
<p id="msg"></p>
<p>
<input name="Submit" type="button" value="submit" onclick="return checkemail()"/>
</p>
</form>
</body>
</html>
2.php頁面(action.php)
<?php
$email = $_POST["email"];
$address = $_POST["address"];
//echo $email;
//echo $address;
echo "success";
?>
jquery.getjson範例
jquery.getjson( url, [ data ], [ callback(data, textstatus) ] )
url 一個字串，其中包含的url，該請求被發送。
data 地圖或字串，發送到與請求的伺服器
callback(data, textstatus) 回調函式是執行，如果請求成功。
看一個簡單的範例
$.ajax({
url: url,
datatype: 'json',
data: data,
success: callback
});
回調是通過返回的資料，這將是一個網頁特效物件或陣列的定義和解析json結構使用$。parsejson（）方法。
大多數實現將指定一個成功的處理程式：
$.getjson('ajax/test.json', function(data) {
$('.result').html('<p>' + data.foo + '</p>'
+ '<p>' + data.baz[1] + '</p>');
});
這個例子，當然，依賴於json文件結構：
{
"foo": "the quick brown fox jumps教程 over the lazy dog.",
"bar": "abcdefg",
"baz": [52, 97]
}
<!doctype html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="images">
</div>
<script>$.getjson("/?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendto("#images");
if ( i == 3 ) return false;
});
});</script>
</body>
</html>>
jquery $.getScript範例
該函式是簡寫的 Ajax 函式，等價於：
$.ajax({
url: url,
dataType: "script",
success: success
});
這裡的回呼函式會傳入返回的 JavaScript 文件。這通常不怎麼有用，因為那時scripts已經執行了。
載入的scripts在全域環境中執行，因此能夠引用其他變數，並使用 jQuery 函式。
比如加載一個 test.js 文件，裡邊包含下面這段程式碼：
$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");
通過引用該文件名，就可以載入並執行這段scripts：
$.getScript("ajax/test.js", function() {
alert("Load was performed.");
});
留言
張貼留言