art.dialog 與 ajax 異步請求

上周寫了一些代碼，涉及到jquery異步請求，這里歸納總結下，希望對剛接觸編程的同學有幫助。

 

主要習慣使用 art.dialog 框架，非常好用，在異步請求上，它提供了很多簡便的方法。

加載使用art.dialog前，需要在頁面代碼上引入

<link href="/js/artDialog/css/blue.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="/js/artDialog/artDialog.js?skin=default"></script>

在jquery1.9.1版本或以上，不支持live()事件，用

$(document).on("click","td #id",function(){
    
})

替代live事件，響應動態顯示的標簽。

 

獲得需要的數據：

ajax異步請求前，需要獲取參數的值。主要有兩種方式可以獲得頁面傳過來的值。

不管是響應button <a> 還是其他，需要在相應標簽內添加傳來的參數值，如：

<a id="ajaxQuery" name="xxx" age="18" >ajaxquery</a>

它的響應事件獲得參數方法：

$(document).on("click", "#ajaxQuery" , function(){
      var name = $(this).attr('name');
      var age = $(this).attr('age');             //這兩種方式是通過獲取屬性值實現
      var value = $(this).val();                  //通過獲取該標簽的value值來實現
})    

 

由於ajax請求一般是異步請求，所以在執行.get類的方法后，這類方法的數據是無法再傳給后面的函數調用。

 

彈框顯示:

一般調用art.dialog的基本步驟：

art.dialog(){
       lock: true,                                  //屏鎖
       background:'#333333',                //背景色
       opacity: 0.6,                                //透明度
       title: '標題',                         
       id: '',
       content: ''                                  //彈框html腳本。  
       ok:function() {


      }
}

 

在ok : function() {}中寫ajax請求腳本，

$.getJSON('url',function( data ) {
          //url為請求的url,可直接在url后面接參數和值，傳參過去
});

或者

$.getJSON( 'URL' ,data,function(data) {

})

data為傳遞參數。

 

請求完成后，依據返回來的參數判斷是否響應成功，若成功，可返回指定頁面

if ( data.code = 'true' ) {
        window.location.href = 'url';
}

 

基本上使用art.dialog整個流程到這里就結束了，接下來，具體談下這幾種ajax請求，和多選項時提交的情況。

多項選，selected情況的多選項情況：

var valueArr = [];
$("#id option:selected").each(function(){
      var value = $(this).val();
      valueArr.push( value );
}

checked多選項時情況：

var valueArr = [];
$("#id td .checked").each( function() {
       var value = $(this).val();
       valueArr.push( value );
}

 

ajax請求方法：

$.post("url",{'data':valueArr,'data2': value} ,function( data ) {

},json);

 

應對form表單的提交，這里有一個更優的方法：

var FormValue = $("#FormId").serialize();
$.get ( "url",FormValue,function(data){
         data = eval("(" + data + ")");     //json decode
         if(data.code === 1001 ) {
                window.location.href = '/url';
     }
         else {
              return false;
     }
});

 

其他ajax當然還有 $.ajax  $.getAjax等，也可以直接 用jquery 的submit事件實現表單提交。