jQuery Ajax使用實(shí)例
Jquery在異步提交方面封裝的很好,直接用AJAX非常麻煩,Jquery大大簡化了我們的操作,不用考慮瀏覽器的差異了。
$.post、$.get是一些簡單的方法,如果要處理復(fù)雜的邏輯,還是需要用到j(luò)Query.ajax()
一、$.ajax的一般格式
$.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType });
二、$.ajax的參數(shù)描述
參數(shù) 描述
url 必需。規(guī)定把請(qǐng)求發(fā)送到哪個(gè) URL。
data 可選。映射或字符串值。規(guī)定連同請(qǐng)求發(fā)送到服務(wù)器的數(shù)據(jù)。
success(data, textStatus, jqXHR) 可選。請(qǐng)求成功時(shí)執(zhí)行的回調(diào)函數(shù)。
dataType 可選。規(guī)定預(yù)期的服務(wù)器響應(yīng)的數(shù)據(jù)類型。
默認(rèn)執(zhí)行智能判斷(xml、json、script 或 html)。
三、$.ajax需要注意的一些地方:
1.data主要方式有三種,html拼接的,json數(shù)組,form表單經(jīng)serialize()序列化的;通過dataType指定,不指定智能判斷。
2.$.ajax只提交form以文本方式,如果異步提交包含<file>上傳是傳過不過去,需要使用jquery.form.js的$.ajaxSubmit
四、$.ajax我的實(shí)際應(yīng)用例子
//1.$.ajax帶json數(shù)據(jù)的異步請(qǐng)求 var aj = $.ajax( { url:'productManager_reverseUpdate',// 跳轉(zhuǎn)到 action data:{ selRollBack : selRollBack, selOperatorsCode : selOperatorsCode, PROVINCECODE : PROVINCECODE, pass2 : pass2 }, type:'post', cache:false, dataType:'json', success:function(data) { if(data.msg =="true" ){ // view("修改成功!"); alert("修改成功!"); window.location.reload(); }else{ view(data.msg); } }, error : function() { // view("異常!"); alert("異常!"); } }); //2.$.ajax序列化表格內(nèi)容為字符串的異步請(qǐng)求 function noTips(){ var formParam = $("#form1").serialize();//序列化表格內(nèi)容為字符串 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:formParam, cache:false, dataType:'json', success:function(data){ } }); } //3.$.ajax拼接url的異步請(qǐng)求 var yz=$.ajax({ type:'post', url:'validatePwd2_checkPwd2?password2='+password2, data:{}, cache:false, dataType:'json', success:function(data){ if( data.msg =="false" ) //服務(wù)器返回false,就將validatePassword2的值改為pwd2Error,這是異步,需要考慮返回時(shí)間 { textPassword2.html("<font color='red'>業(yè)務(wù)密碼不正確!</font>"); $("#validatePassword2").val("pwd2Error"); checkPassword2 = false; return; } }, error:function(){} }); //4.$.ajax拼接data的異步請(qǐng)求 $.ajax({ url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action', type:'post', data:'merName='+values, async : false, //默認(rèn)為true 異步 error:function(){ alert('error'); }, success:function(data){ $("#"+divs).html(data); } });
相關(guān)文章
通過jsonp獲取json數(shù)據(jù)實(shí)現(xiàn)AJAX跨域請(qǐng)求
JSON 可通過 JavaScript 進(jìn)行解析,JSON 數(shù)據(jù)可使用 AJAX 進(jìn)行傳輸,這篇文章主要介紹了通過jsonp獲取json數(shù)據(jù)(實(shí)現(xiàn)AJAX跨域請(qǐng)求),有興趣的可以了解一下。2017-01-01jQuery獲取選中內(nèi)容及設(shè)置元素屬性的方法
這篇文章主要介紹了jQuery獲取選中內(nèi)容及設(shè)置元素屬性的方法,需要的朋友可以參考下2014-07-07jQuery+CSS3實(shí)現(xiàn)樹葉飄落特效
本文給大家分享的是一段使用jQuery+CSS3實(shí)現(xiàn)樹葉飄落特效的代碼,效果非常不錯(cuò),分享給大家,希望大家能夠喜歡2015-02-02jQuery快速上手:寫jQuery與直接寫JS的區(qū)別詳細(xì)解析
jQuery代碼具體的寫法和原生的Javascript寫法在執(zhí)行常見操作時(shí)的區(qū)別如下所示。需要的朋友可以過來參考下2013-08-08利用Jquery隊(duì)列實(shí)現(xiàn)根據(jù)輸入數(shù)量顯示的動(dòng)畫
這篇文章給大家演示了如何利用Jquery隊(duì)列實(shí)現(xiàn)輸入不同的數(shù)量就顯示不同的動(dòng)畫效果,文中給出了實(shí)例,讓大家更容易理解,有需要的可以參考借鑒。2016-09-09