JQuery真的不难~第六回 JQ中的异步调用方式
生活随笔
收集整理的這篇文章主要介紹了
JQuery真的不难~第六回 JQ中的异步调用方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
回到目錄
前言
今天主要講一下JQ中的異步編程,它將ajax進行封裝,在進行異步請求時顯得非常容易,無論是GET,POST方式,還是text,xml,javascript,json等數據通訊都是那么的自然
現在,我們就走入jq的ajax的殿堂吧。
GET請求獲取數據 <script src="http://img1.c2cedu.com/Scripts/jquery/jquery-1.4.2.min.js" type="text/javascript"></script><script type="text/javascript">?$.ajax({??????????? type: "GET",
??????????? dataType: "html",
??????????? url: "ajaxData.htm",
??????????? data: {}, //參數信息,采用JS對象的形式,也可以使用URL地址比較傳統的&將參數分隔
??????????? error: function () {
??????????????? alert("獲取數據失敗");
??????????? },
??????????? beforeSend: function () {
??????????????? alert("發送請求之前出現錯誤");
??????????? },
??????????? success: function (data) {
??????????????? $("#list").html(data)
??????????? }
??????? });</script> ajaxData.htm的內容為: <ul><li>data:zzl</li><li>infomation:better man</li> </ul> POST請求操作數據 $.ajax({type:'POST',
data:{name:'zzl',email:'bfyxzls@sina.com',addr:'beijing'},url: '/ajax/insert.ashx',success: function(data) {if(data.res){alert('操作成功‘); }} });
注意:AJAX可以跨域發GET請求,來讀取數據,但不可以發POST請求,這是正常的,要不就太危險了,呵呵。
$.ajax({type:'GET',dataType:'jsonp',jsonp: "jsonpcallback", //需要與服務端的jsonp字符匹配url: 'http://www.sina.com/ajax/test.',success: function(data) {$('#result').html(data);} });
對于JQ為AJAX的封裝,還有幾個簡潔的寫法,等下次再寫,寫個續集!
感謝閱讀!
回到目錄
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的JQuery真的不难~第六回 JQ中的异步调用方式的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 两个对象转换的方法
- 下一篇: MetroGridHelper: A h