jQuery系列(十四):jQuery中的ajax

1、什么是ajax

AJAX = 異步的javascript和XML(Asynchronous Javascript and XML)

簡言之,在不重載整個網頁的情況下,AJAX通過后臺加載數據,并在網頁上進行顯示。

通過 jQuery AJAX 方法,您能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數據直接載入網頁的被選元素中。

2、jQuery的load()方法

jQuery load()方法是簡單但強大的AJAX方法。

load()方法從服務器加載數據,并把返回的數據放入被選元素中。

ps:該方法使用不多,了解即可

語法:

$("selector").load(url,data,callback);
// 第一種情況
$('#btn').click(function(){//只傳一個url,表示在id為#new-projects的元素里加載index.html$('#new-projects').load('./index.html');
});// 第二種情況
$('#btn').click(function(){//只傳一個url,導入的index.html文件含有多個傳遞參數,類似于:index/html?name='張三'$('#new-projects').load('./index.html',{"name":'張三',"age":12});
});// 第三種情況
//加載文件之后,會有個回調函數,表示加載成功的函數
$('#new-projects').load('./index.html',{"name":'張三',"age":12},function(){
});

3、jQuery的getJSON方法

jQuery的AJAX中使用getJSON()方法異步加載JSON格式數據。獲取服務器中的數據,并對數據進行解析,顯示到頁面中

語法:?

$.getJSON(url,[data],[callback])

參數解釋:

url參數:為請求加載json格式文件的服務器地址
可選項data參數:為請求時發送的數據
callback參數:為數據請求成功后執行的函數
$.getJSON("./data/getJSON.json", function (data) {var str = "";//初始化保存內容變量$.each(data, function(index,ele) {$('ul').append("<li>"+ele.name+"</li>")});
});

4、jquery中的$.get()方法

$.get() 方法通過 HTTP GET 請求從服務器上請求數據

語法:

$.get(URL,callback);
url參數:規定你請求的路徑,是必需參數
callback參數:為數據請求成功后執行的函數
$.get('./data/getJSON.json',function(data,status){console.log(status);   //success    200狀態碼 ok的意思              
})

5、jQuery的post()方法

與get()方法相比,post()方法多用于以POST方式向服務器發送數據,服務器接收到數據之后,進行處理,并將處理結果返回頁面

語法:

$.post(URL,data,callback);
url參數:規定你請求的路徑,是必需參數,可選的data參數是連同請求發送的數據
可選的callback參數:為數據請求成功后執行的函數
 $.post('/index',{name:'張三'},function(data,status){console.log(status);})

6、jQuery中的$.ajax()方法*****

query的$.ajax()方法 是做ajax技術經常使用的一個方法。

參數如下:?

(1).url:?要求為String類型的參數,(默認為當前頁地址)發送請求的地址。

(2).type:?要求為String類型的參數,請求方式(post或get)默認為get。注意其他http請求方法,例如put和delete也可以使用,但僅部分瀏覽器支持。

(3).timeout: 要求為Number類型的參數,設置請求超時時間(毫秒)。此設置將覆蓋$.ajaxSetup()方法的全局設置。

(4).async: 要求為Boolean類型的參數,默認設置為true,所有請求均為異步請求。如果需要發送同步請求,請將此選項設置為false。注意,同步請求將鎖住瀏覽器,用戶其他操作必須等待請求完成才可以執行。

(5).cache: 要求為Boolean類型的參數,默認為true(當dataType為script時,默認為false),設置為false將不會從瀏覽器緩存中加載請求信息。

(6).data:?要求為Object或String類型的參數,發送到服務器的數據。如果已經不是字符串,將自動轉換為字符串格式。get請求中將附加在url后。防止這種自動轉換,可以查看  processData選項。對象必須為key/value格式,例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組,JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。

(7).dataType: 要求為String類型的參數,預期服務器返回的數據類型。如果不指定,JQuery將自動根據http包mime信息返回responseXML或responseText,并作為回調函數參數傳遞。可用的類型如下:

  xml:返回XML文檔,可用JQuery處理。

  html:返回純文本HTML信息;包含的script標簽會在插入DOM時執行。

  script:返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時(不在同一個域下),所有post請求都將轉為get請求。

  json:返回JSON數據。

 ? ?jsonp:JSONP格式。使用SONP形式調用函數時,例如myurl?callback=?,JQuery將自動替換后一個“?”為正確的函數名,以執行回調函數。

  text:返回純文本字符串。

(8).beforeSend: 要求為Function類型的參數,發送請求前可以修改XMLHttpRequest對象的函數,例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數。 function(XMLHttpRequest){ this; //調用本次ajax請求時傳遞的options參數 } 9.complete:

要求為Function類型的參數,請求完成后調用的回調函數(請求成功或失敗時均調用)。參數:XMLHttpRequest對象和一個描述成功請求類型的字符串。 function(XMLHttpRequest, textStatus){ this; //調用本次ajax請求時傳遞的options參數 }

(10).success:

  要求為Function類型的參數,請求成功后調用的回調函數,有兩個參數。

  (1)由服務器返回,并根據dataType參數進行處理后的數據。

  (2)描述狀態的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等?

(11).error:?要求為Function類型的參數,請求失敗時被調用的函數。該函數有3個參數,即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數如下: function(XMLHttpRequest, textStatus, errorThrown){ //通常情況下textStatus和errorThrown只有其中一個包含信息 this; //調用本次ajax請求時傳遞的options參數 }

(12).contentType: 要求為String類型的參數,當發送信息至服務器時,內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

(13).dataFilter: 要求為Function類型的參數,給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據,type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。 function(data, type){ //返回處理后的數據 return data; }

(14).dataFilter: 要求為Function類型的參數,給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據,type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。 function(data, type){ //返回處理后的數據 return data; }

(15).global: 要求為Boolean類型的參數,默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局ajax事件,ajaxStart或ajaxStop可用于控制各種ajax事件。

(16).ifModified: 要求為Boolean類型的參數,默認為false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false,即忽略頭信息。

(17).jsonp: 要求為String類型的參數,在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分,例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。

(18).username: 要求為String類型的參數,用于響應HTTP訪問認證請求的用戶名。

(19).password: 要求為String類型的參數,用于響應HTTP訪問認證請求的密碼。

(20).processData: 要求為Boolean類型的參數,默認為true。默認情況下,發送的數據將被轉換為對象(從技術角度來講并非字符串)以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息,請設置為false。

(21).scriptCharset: 要求為String類型的參數,只有當請求時dataType為"jsonp"或者"script",并且type是GET時才會用于強制修改字符集(charset)。通常在本地和遠程的內容編碼不同時使用

6-1:get方式

//get()方式
  $.ajax({url:'./data/index.txt',type:'get',dataType:'text',success:function(data){$('p').html(data);},error:function(error){console.log(error)}

6-2:post方式

//post()方式
$.ajax({url:'/index',type:'post',data:{name:'張三',age:12},success:function(data){$('p').html(data);},error:function(error){console.log(error)
}

?

轉載于:https://www.cnblogs.com/felixwang2/p/9878940.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/279062.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/279062.shtml
英文地址,請注明出處:http://en.pswp.cn/news/279062.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

flex 布局以及樣式

1.Flex是Flexible Box的縮寫&#xff0c;意為”彈性布局”&#xff0c;用來為盒狀模型提供最大的靈活性2.任何一個容器都可以用flex布局&#xff08;注意&#xff0c;設為Flex布局以后&#xff0c;子元素的float、clear和vertical-align屬性將失效&#xff09; 采用Flex布局的元…

java swing列表數據加監聽,【Java Swing公開課|Java監聽列表項選擇事件怎么用,看完這篇文章你一定就會了】- 環球網校...

【摘要】作為一門面向對象編程語言&#xff0c;Java吸收了C語言的優點&#xff0c;也展現了其強大的一面&#xff0c;我們能在各個地方看到其功能強大和簡單易用的兩個特征&#xff0c;當然&#xff0c;也吸引了很多程序員的注意力&#xff0c;所以就有人想了解Java的相關內容&…

fc-ae-1553_什么是AE-L,AF-L和*按鈕,它們的作用是什么?

fc-ae-1553DSLRs and mirrorless cameras have a lot of buttons. If you’re just starting to get the hang of manually controlling your camera, you’re probably wondering what all the—seemingly non-essential—ones do. Let’s take a look at the AE-L, AF-L, AF-…

PopsTabView--filter容器

PopsTabView是個filter容器,他可以自動,快速,構建不同篩選樣式,自由組合成一組tab. DownloadDownloadAuthorLicense篩選樣式篩選種類可自定義屬性單列單選,多選初始數據bean,篩選結果bean,tab樣式,篩選樣式多排單選,多選初始數據bean,篩選結果beantab樣式,篩選樣式雙列單項單選…

git 基本使用方法

git clone https://gitee.com/kuaiyiwazz.git //開始下載服務器項目文件&#xff08;后邊是服務地項目的地址&#xff09;git add . //這里有個點&#xff08;仔細看&#xff09;git status //檢查項目修改狀態git commit -m"注釋(修改的內容)" git push //添…

大學留級兩年不敢和家人說_您說什么:如何與家人保持聯系?

大學留級兩年不敢和家人說Earlier this week we asked you to share your tips, tricks, and techniques for staying connected when you’re away from your home broadband connection. Now we’re back with a roundup of what you said. 本周早些時候&#xff0c;我們要求…

DevExpress v17.2新版亮點—WinForms篇(四)

2019獨角獸企業重金招聘Python工程師標準>>> DevExpress首推團隊升級培訓套包&#xff0c;最高可省10萬元&#xff01;查看詳情>>> 用戶界面套包DevExpress v17.2終于正式發布&#xff0c;本站將以連載的形式為大家介紹各版本新增內容。開篇介紹了DevExpre…

Solr 11 - Solr集群模式的部署(基于Solr 4.10.4搭建SolrCloud)

目錄 1 SolrCloud結構說明2 環境的安裝2.1 環境說明2.2 部署并啟動ZooKeeper集群2.3 部署Solr單機服務2.4 添加Solr的索引庫3 部署Solr集群服務(SolrCloud)3.1 啟動ZooKeeper3.2 ZooKeeper管理配置文件3.3 修改SolrCloud監聽端口3.4 關聯Solr與ZooKeeper3.5 分發SolrCloud服務3…

matlab怎么畫一箭穿心,MATLAB學習與使用:如何繪制三維心形圖 經驗告訴你該這樣...

MATLAB是MATrix & LABoratory(矩陣實驗室)的縮寫&#xff0c;是一款強大的科學軟件&#xff0c;具有編程、繪圖、仿真等功能。利用MATLAB繪制一款三維的心形圖&#xff0c;然后送給心愛的姑娘&#xff0c;也是理工男撩妹的一項小技能。工具/材料MATLAB三維心形圖操作方法01…

mac重置系統_如何在Mac上重置打印系統

mac重置系統Printers are notorious for failing frequently. A quick restart of the printer or computer usually fixes most intermittent issues, but occasionally it’s best to reset your printing settings and reinstall the printer completely. Consider this a f…

COW奶牛!Copy On Write機制了解一下

前言 只有光頭才能變強 在讀《Redis設計與實現》關于哈希表擴容的時候&#xff0c;發現這么一段話&#xff1a; 執行BGSAVE命令或者BGREWRITEAOF命令的過程中&#xff0c;Redis需要創建當前服務器進程的子進程&#xff0c;而大多數操作系統都采用寫時復制&#xff08;copy-on-w…

參數回調

1.場景 參數回調方式與調用本地 callback 或 listener 相同&#xff0c;只需要在 Spring 的配置文件中聲明哪個參數是 callback 類型即可。 Dubbo 將基于長連接生成反向代理&#xff0c;這樣就可以從服務器端調用客戶端邏輯 2.

matlab胡良劍第五章,MATLAB習題參考答案(胡良劍,孫曉君)

MATLAB習題參考答案第一章 MATLAB入門4、求近似解解&#xff1a;>> x-2:0.05:2;yx.^4-2.^x兩個近似解&#xff1a;y1f(-0.85) -0.0328; y2f(1.250) 0.0630第二章 MATLAB編程與作圖1、 設x是數組&#xff0c;求均值和方差 解&#xff1a;函數文件如下&#xff1a;function…

windows 全局變量_如何在Windows中使用全局系統環境變量

windows 全局變量Any system administrator who spends a good bit of time in the command prompt or batch scripts is probably well aware of built in environment variables Windows offers (i.e. Path, WinDir, ProgramFiles, UserProfile, etc.). If you find yourself…

Day2-T1

原題目 Describe&#xff1a;貪心&#xff0c;左邊和右邊中選字典序小的 code&#xff1a; #include<bits/stdc.h> using namespace std; int n,step,head,tail; char p[50005]; int main() {freopen("bcl.in","r",stdin);freopen("bcl.out&quo…

hadoop編譯java,Hadoop源碼編譯(2.4.1)

背景Hadoop 2.4.1預編譯版本自帶的libhadoop.so是在32位機器上編譯上,導致在64位OS上運行時&#xff0c;總出現如下告警&#xff1a;WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable查看…

C# System.Windows.Forms.NumericUpDown 控件全選其中文字

num_length.Focus(); UpDownBase updbText (UpDownBase)num_length; num_length.Select(0, updbText.Text.Length);轉載于:https://www.cnblogs.com/LuoEast/p/7942476.html

twitter api使用_使用P2創建自己的Twitter風格的組博客

twitter api使用Would you like a great way to post stuff quickly online and communicate with your readers? Here’s how you can use the P2 theme to transform WordPress into a great collaboration and communications platform. 您是否想以一種很好的方式在網上快…

10_30_unittest

1、斷言 1&#xff09;、self.assertEqual(2,res)#期望值qian、結果值hou2&#xff09;TextTestRunner 源碼 必要的參數3&#xff09;測試結果 上下文管理器 with open("test.txt",w,encodingutf-8) as file:runner unittest.TextTestRunner(streamfile,verbosity2)…

用maven profile實現環境配置切換

前言 互聯網后端服務通常會部署多個環境&#xff1a;開發環境、測試環境、預發布環境和生產環境。不同的環境通常有各自的環境配置&#xff0c;例如mysql服務器的地址、用戶名密碼&#xff0c;zookeeper的ip和端口等等。為了使打出的jar包能獲取不同環境的配置&#xff0c;業界…