jQuery的ajax使用

來源:互聯網
上載者:User

一:jQuery.ajax文法基礎

jQuery.ajax([options])
概述:通過 HTTP 要求載入遠端資料。

jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其建立的 XMLHttpRequest 對象。使用這個方法可以獲得更多的靈活性。
資料類型
$.ajax()函數依賴伺服器提供的資訊來處理返回的資料。通過dataType選項還可以指定其他不同資料處理方式。其中,text和xml類型返回的資料不會經過處理。如果指定為html類型,任何內嵌的JavaScript都會在HTML作為一個字串返回之前執行。如果指定為json類型,則會把擷取到的資料作為一個JavaScript對象來解析,並且把構建好的對象作為結果返回。發送資料到伺服器,預設情況下,Ajax請求使用GET方法。如果要使用POST方法,可以設定type參數值。這個選項也會影響data選項中的內容如何發送到伺服器。
使用情境一:
描述:儲存資料到伺服器,成功時顯示資訊。jQuery 代碼:
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});
使用情境二:
描述:裝入一個 HTML 網頁最新版本。jQuery 代碼:
$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

load(url, [data], [callback])
概述:載入遠程 HTML 檔案代碼並插入至 DOM 中。
預設使用 GET 方式 - 傳遞附加參數時自動轉換為 POST 方式。
使用情境一:
描述:載入 feeds.html 檔案內容。jQuery 代碼:
$("#feeds").load("feeds.html");

jQuery.get(url, [data], [callback], [type])和jQuery.post(url, [data], [callback], [type])

概述:通過遠程 HTTP GET或POST  請求載入資訊。
這是一個簡單的 GET或POST 請求功能以取代複雜 $.ajax 。請求成功時可調用回呼函數。如果需要在出錯時執行函數,請使用 $.ajax。
描述:顯示 test.aspx 傳回值(HTML 或 XML,取決於傳回值),添加一組請求參數。jQuery 代碼:
$.get("test.aspx", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
});
$.post("test.aspx", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
});

上面是基本的文法,我們只是先做一個瞭解,要是你已經熟悉,那麼我們將開始一步一步對上面的方法和使用情境進行具體討論。

二:jQuery.ajax伴隨ASP.NET的實戰練習

首先建立Default.aspx頁面,作為請求發起頁面,並會獲得傳回值。頁面的代碼Default.aspx是:

View Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryAjax2._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="js\jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('#showinfo').click(function() {
            var data = { key1: "劉明豐", key2: "林望" };
            $.ajax({
                type: "POST",
                url: "response.aspx",
                data: data,
                dataType: "text",
                success: function(msg) {
                    $("#ajax").append(msg);
                }
            });
            $.ajax({
                url: "test.htm",
                cache: false,
                success: function(html) {
                    $("#resulthtml").append(html);
                }
            });
            $("#load").load("test.htm");
            $.get("response.aspx", data, success1, "text");
            $.get("TextJson.txt", success3, "json");
            $.post("response.aspx", data, success2, "text");
            function success1(message) {
                $("#get").append(message);
            }
            function success2(message) {
                $("#post").append(message);
            }
            function success3(siteData) {
                var result = "<li>334一號床:" + siteData.key1 + "</li>";
                result += "<li>334二號床:" + siteData.key2 + "</li>";
                result += "<li>334三號床: " + siteData.key3 + "</li>";
                result += "<li>334四號床: " + siteData.key4 + "</li>";
                $("#result").html(result);
            }
        });
    });
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
<input type="button" id="showinfo" value="show info"></input> 
     <ul id="ajax">ajax:</ul>
     <ul id="resulthtml">resulthtml:</ul>
     <ul id="load">load:</ul>     
     <ul id="get">get:</ul>
     <ul id="post">post:</ul>
     <ul id="result"></ul>
     
</body>
</html>複製代碼

Default.aspx.cs裡面有沒寫任何代碼,預設即可。
請求的接受者這裡面有三種角色:response.aspx頁面、test.htm靜態頁面和TextJson.txt。

response.aspx頁面:主要是在伺服器端獲得用戶端提交的資料,並返回資料給用戶端。
test.htm靜態頁面:主要是給用戶端局部裝入一個HTML網頁最新版本。
TextJson.txt:是作為資料儲存在檔案中,讓用戶端來非同步訪問的。

response.aspx頁面代碼,response.aspx是:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="response.aspx.cs" Inherits="JqueryAjax2.response" %>

沒有任何html代碼,因為主要是在伺服器端獲得用戶端提交的資料,並返回資料給用戶端,不需要顯示html內容,所以可以不含html標記。
response.aspx.cs頁面代碼:

View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Runtime.Serialization.Json;
using System.Runtime.Serialization;

namespace JqueryAjax2
{
    public partial class response : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string str = Request["key1"];
            Response.Write("success" + str);
        }
    }
}

在代碼中可以看到伺服器端獲得用戶端提交的資料,並返回資料給用戶端的方式。

test.htm靜態頁面的代碼是:

View Code

<!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>
    <title></title>
</head>
<body>
test.html
</body>
</html>

當靜態頁面被請求後,會作為html的格式返回用戶端,使用 $("#resulthtml").append(html);這樣的方法來顯示test.htm靜態頁面的內容。

TextJson.txt裡面儲存著一段文本,是json格式的:

{   "key1": "劉明豐",   "key2": "林望",   "key3": "陳文傑",   "key4": "耿殿佳" }

在被訪問後返回的是json格式的資料,在用戶端獲得json後會自動轉換成對象。

好了,jQuery的非同步使用情境基本滿足我們的需求,自己試試看吧。

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

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

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