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.");
});

留言

張貼留言

這個網誌中的熱門文章

c語言-關於#define用法

今天整理了一些#define的用法，與大家共享！ 1.簡單的define定義 #define MAXTIME 1000 一個簡單的MAXTIME就定義好了，它代表1000，如果在程式裡面寫 if (i<MAXTIME){.........} 編譯器在處理這個程式碼之前會對MAXTIME進行處理替換為1000。 這樣的定義看起來類似於普通的常數定義CONST，但也有著不同，因為define的定義更像是簡單的文本替換，而不是作為一個量來使用，這個問題在下面反映的尤為突出。 2.define的“函式定義” define可以像函式那樣接受一些參數，如下 #define max(x,y) (x)>(y)?(x):(y); 這個定義就將返回兩個數中較大的那個，看到了嗎？因為這個“函式”沒有類型檢查，就好像一個函式模板似的，當然，它絕對沒有模板那麼安全就是了。可以作為一個簡單的模板來使用而已。 但是這樣做的話存在隱患，例子如下： #define Add(a,b) a+b; 在一般使用的時候是沒有問題的，但是如果遇到如：c * Add(a,b) * d的時候就會出現問題，代數式的本意是a+b然後去和c，d相乘，但是因為使用了define（它只是一個簡單的替換），所以式子實際上變成了 c*a + b*d 另外舉一個例子： #define pin (int*); pin a,b; 本意是a和b都是int型指標，但是實際上變成int* a,b; a是int型指標，而b是int型變數。 這是應該使用typedef來代替define，這樣a和b就都是int型指標了。 所以我們在定義的時候，養成一個良好的習慣，建議所有的層次都要加括號。 3.巨集的單行定義 #define A(x) T_##x #define B（x) #@x #define C（x) #x 我們假設：x=1，則有： A(1)------〉T_1 B(1)------〉'1' C(1)------〉"1" （這裡參考了hustli的文章） 3.define的多行定義 define可以替代多行的程式碼，例如MFC中的巨集定義（非常的經典，雖然讓人看了噁心） #define M
閱讀完整內容

CMD常用網管指令

現階段(GUI)視窗圖示使用者介面幾乎不需要使用CMD指令,但有些指令還不錯用,可以還原電腦 DOS指令集工作列→開始→執行→輸入的指令 工作列→開始→執行→輸入的指令 系統還原 1.按(開始) => 按(關機) => 選(將電腦重新啟動在MS-DOS模式) 2.鍵入C:\WINDOWS>Scanreg/restore 按 3.進入左Microsoft Registry Checker 4.哪裡有Windows最近五日的紀錄 , 選定哪一天後再按 最基本，最常用的，測試物理網路的    ping 192.168.0.8 －t ，參數－t是等待用戶去中斷測試 查看DNS、IP、Mac等    A.Win98：winipcfg    B.Win2000以上：Ipconfig/all 網路信使 Net send 電腦名/IP　* (廣播) 傳送內容，注意不能跨網段 net stop messenger 停止信使服務，也可以在面板－服務修改 net start messenger 開始信使服務 探測對方對方電腦名，所在的組、域及當前用戶名 （追捕的工作原理） ping －a IP －t ，只顯示NetBios名 nbtstat -a 192.168.10.146 比較全的 netstat -a 顯示出你的電腦當前所開放的所有埠 netstat -s -e 比較詳細的顯示你的網路資料，包括TCP、UDP、ICMP 和 IP的統計等 探測arp綁定（動態和靜態）列表，顯示所有連接了我的電腦，顯示對方IP和MAC位址 arp -a 在代理伺服器端 捆綁IP和MAC位址，解決局域網內盜用IP！： ARP －s 192.168.10.59 00 －50－ff－6c－08－75 解除網卡的IP與MAC位址的綁定： arp -d 網卡IP 在網路鄰居上隱藏你的電腦 net config server /hidden:yes net config server /hidden:no 則為開啟 幾個net命令 A.顯示當前工作組伺服器列表 net view，當不帶選項使用本命令時， 它就會顯示當前域或網路上的電腦上的列表。 比如：查看這個IP上的共用資源，就可以 C:\>net
閱讀完整內容

PHP 與 JavaScript 之間傳值利用 json

用Json實現PHP與JavaScript間資料交換的方法詳解 php JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。 簡而論之，不管是xml還是json都是為了方便在客戶端與伺服器端交互資料的中轉站，特別是用於物件型資料，比如最常見的陣列。 下面將分別將陣列從php傳送給javascript，以及將陣列從javascript傳送給php示例說明，例子比較簡單，明白概念即可。不管從php傳送給javascript，還是javascript傳送給php，json在傳送之前都會將物件扁平化即一維化為字元串。 PHP 向 JavaScript 傳值 PHP 文件 json.php <?php $arr = array( 'name' => 'scripts之家', 'nick' => 'Gonn', 'contact' => array( 'email' => 'xxxxxxx@163.com', 'website' => '', ) ); $json_string = json_encode($arr); echo "getProfile($json_string)"; ?> 光執行這個文件，其結果如下： getProfile({"name":"u5e0cu4e9a","nick":"Gonn", "contact":{"email":"xxxxxxx@163.com","website":""}}) json.php 是通過 json_encode 函式將陣列扁平化，然後發送，相反有個 json_decode 函式。 那麼在 JavaScript 如何呼用呢？很簡單，定義一個變數獲取 PHP 傳來的 Json，該 Json 具備物件的特性，我們可以用 array.name 這種方式來獲取該 Json 的屬性。 <script type=
閱讀完整內容