AJAX請求 load方法的使用

來源:互聯網
上載者:User

使用jQuery的load方法可以簡單快捷的發起AJAX請求。使用load方法可以把已完成相應的文本插入到封裝集所包含的任何元素中。

load方法文法

load(url,parameters,callback)

參數

 

url

(字串)伺服器端資源地址。

parameter

(對象)需要傳遞到伺服器端的參數。如果指定,就用POST方法請求;如果省略,就用GET方法請求。

callback

(函數)在響應資料載入到封裝集後調用。該函數參數依次為文本、狀態代碼和XHR執行個體。

傳回值

封裝集

看個簡單的例子

用戶端代碼:

<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script><script type="text/javascript">$().ready(function () {  $('#selectNum').change(function () {    var idValue = $(this).val();    //採用POST方式調用服務    $('#show').load('Server.aspx', { id: idValue });    //採用GET方式調用服務    //var url = 'Server.aspx?id=' + idValue;    //$('#show').load(url,null , function (text,status,xhr) { alert(text) });  })})</script></head><body><select id="selectNum">  <option value="0">--Select--</option>  <option value="1">1</option>  <option value="2">2</option>  <option value="3">3</option></select><div id="show"></div></body></html>

服務端主要代碼:

protected void Page_Load(object sender, EventArgs e){  if (!Page.IsPostBack)  {    if (Request["id"] != null && !string.IsNullOrEmpty(Request["id"].ToString()))    {      Response.Write( GetData(Request["id"].ToString()));    }  }}protected string GetData(string id){  string str = string.Empty;  switch (id)  {     case "1":      str += "This is Number 1";      break;    case "2":      str += "This is Number 2";      break;    case "3":      str += "This is Number 3";      break;    default:      str += "Warning Other Number!";      break;  }  return str;}

運行程式,結果

我們也可以登出POST方式代碼,來看GET方式的代碼,也會得到相同的結果。

用httpwatcher攔截請求資訊,當下拉框中選擇數字時,可以截取到如下請求資訊。

使用GET方法時的:

使用POST方法時的:

從兩幅圖中我們可以看到,當指定load方法中的第二個參數時使用的是POST請求,當不指定第二個參數時則是GET請求。

如果伺服器端返回了很多標籤,我們還可以對這些標籤進行進一步篩選,如:$(‘#show’).load(‘url p’),這樣,就把返回內容中的p標籤選擇了出來

Demo下載

相關文章

聯繫我們

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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