首頁 > 開發者 > Ajax

jQuery Ajax樣本學習筆記

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

使用 jQuery 將使 Ajax 變得及其簡單。jQuery 提供有一些函數，可以使簡單的工作變得更加簡單，複雜的工作變得不再複雜。

Ajax 最常見的用法就是把一塊 HTML 程式碼載入到頁面的某個地區中去。為此，只需簡單地選擇所需的元素，然後使用 load() 函數即可。下面是一個用於更新統計資料的樣本：

 代碼如下 複製代碼

$(‘#stats’).load(’stats.html’);

通常，我們只需簡單地把一些參數傳遞給伺服器中的某個頁面。正如您所預料的，使用 jQuery 實現這一操作非常地簡單。您可以使用 $.post() 或者 $.get()，這由所需的方法決定。如果需要的話，您還可以傳遞一個可選的資料對象和回呼函數。清單 4 顯示了一個發送資料和使用回調的簡單樣本。

清單 4. 使用 Ajax 向頁面發送資料

 代碼如下 複製代碼

$.post(’save.cgi’, {

text: ‘my string’,

number: 23

}, function() {

alert(‘Your data has been saved.’);

});

如果您確實需要編寫一些複雜的 Ajax 指令碼，那麼需要用到 $.ajax() 函數。您可以指定 xml、script、html 或者 json，jQuery 將自動為回呼函數準備合適的結果，這樣您便可以立即使用該結果。還可以指定 beforeSend、error、success 或者 complete 回呼函數，向使用者提供更多有關 Ajax 體驗的反饋。此外，還有一些其它的參數可供使用，您可以使用它們設定 Ajax 請求的逾時，也可以設定頁面 “最近一次修改” 的狀態。清單 5 顯示了一個使用一些我所提到的參數檢索 XML 文檔的樣本。

清單 5. $.ajax() 使 Ajax 由複雜變簡單

 代碼如下 複製代碼

$.ajax({

url: ‘document.xml’,

type: ‘GET’,

dataType: ‘xml’,

timeout: 1000,

error: function(){

alert(‘Error loading XML document’);

},

success: function(xml){

// do something with xml

}

});

當 success 回呼函數返回 XML 文檔後，您可以使用 jQuery 檢索這個 XML 文檔，其方式與檢索 HTML 文檔是一樣的。這樣使得處理 XML 文檔變得相當地容易，並且把內容和Data Integration到了您的 Web 網站裡面。清單 6 顯示了 success 函數的一個擴充，它為 XML 中的每個 元素都添加了一個清單項目到 Web 頁面中。
清單 6. 使用 jQuery 處理 XML 文檔

 代碼如下 複製代碼

success: function(xml){

$(xml).find(‘item’).each(function(){

var item_text = $(this).text();

$(‘

 
‘)

.html(item_text)

.appendTo(‘ol’);

});

}

看一個jQuery Ajax 執行個體示範

 代碼如下 複製代碼

<html>
<head>
<title>jQuery Ajax 執行個體示範</title>
</head>
<script language="javascript" src="../lib/jquery.js"></script>
<script language="javascript">

$(document).ready(function ()
{
   $('#send_ajax').click(function (){
     var params=$('input').serialize(); //序列化表單的值
     $.ajax({
       url:'ajax_json.php', //幕後處理程式
       type:'post',         //資料發送方式
       dataType:'json',     //接受資料格式
       data:params,         //要傳遞的資料
       success:update_page //回傳函數(這裡是函數名)
     });
   });

//$.post()方式：
$('#test_post').click(function (){
    $.post(
      'ajax_json.php',
      {
        username:$('#input1').val(),
        age:$('#input2').val(),
        sex:$('#input3').val(),
        job:$('#input4').val()
      },
      function (data) //回傳函數
      {
        var myjson='';
        eval('myjson=' + data + ';');
        $('#result').html("姓名:" + myjson.username + "<br/>工作:" + myjson['job']);
      }
    );
   });

//$.get()方式：
$('#test_get').click(function ()
{
    $.get(
      'ajax_json.php',
      {
        username:$("#input1").val(),
        age:$("#input2").val(),
        sex:$("#input3").val(),
        job:$("#input4").val()
      },
      function(data) //回傳函數
      {
        var myjson='';
        eval("myjson=" + data + ";");
        $("#result").html(myjson.job);
      }
    );
});
});

function update_page (json) //回傳函數實體，參數為XMLhttpRequest.responseText
{
var str="姓名:"+json.username+"<br />";
str+="年齡:"+json.age+"<br />";
str+="性別:"+json.sex+"<br />";
str+="工作:"+json.job+"<br />";
str+="追加測試:"+json.append;
$("#result").html(str);
}
</script>
<body>

<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
    <p><span>輸入姓名:</span><input type="text" name="username" id="input1" /></p>
    <p><span>輸入年齡:</span><input type="text" name="age" id="input2" /></p>
    <p><span>輸入性別:</span><input type="text" name="sex" id="input3" /></p>
    <p><span>輸入工作:</span><input type="text" name="job" id="input4" /></p>
</form>
<button id="send_ajax">提交</button>
<button id="test_post">POST提交</button>
<button id="test_get">GET提交</button>

</body>
</html>


PHP 檔案 ajax_json.php：

 代碼如下 複製代碼

<?php
//$arr = $_POST; //若以$.get()方式發送資料，則要改成$_GET.或者乾脆:$_REQUEST
$arr = $_REQUEST;
$arr['append'] = '測試字串';
//print_r($arr);
$myjson = my_json_encode($arr);
echo $myjson;

function my_json_encode($phparr)
{
    if(function_exists("json_encode"))
    {
      return json_encode($phparr);
    }
    else
    {
      require_once 'json/json.class.php';
      $json = new Services_JSON;
      return $json->encode($phparr);
    }
}
?>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
jquery ajax encoding jquery ajax file upload codeigniter jquery ajax jquery ajax rest jquery ajax upload multiple files php jquery ajax json example jquery ajax get response code
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More