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事件实现表单提交。