art.dialog 与 ajax 异步请求

上周写了一些代码，涉及到jquery异步请求，这里归纳总结下，希望对刚接触编程的同学有帮助。

主要习惯使用 art.dialog 框架，非常好用，在异步请求上，它提供了很多简便的方法。

加载使用art.dialog前，需要在页面代码上引入

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

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

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

替代live事件，响应动态显示的标签。

获得需要的数据：

ajax异步请求前，需要获取参数的值。主要有两种方式可以获得页面传过来的值。

不管是响应button <a> 还是其他，需要在相应标签内添加传来的参数值，如：

1 <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的基本步骤：

 1 art.dialog(){
 2        lock: true,                                  //屏锁
 3        background:'#333333',                //背景色
 4        opacity: 0.6,                                //透明度
 5        title: '标题',                         
 6        id: '',
 7        content: ''                                  //弹框html脚本。  
 8        ok:function() {
 9 
10 
11       }
12 }

在ok : function() {}中写ajax请求脚本，

1 $.getJSON('url',function( data ) {
2           //url为请求的url,可直接在url后面接参数和值，传参过去
3 });

或者

1 $.getJSON( 'URL' ,data,function(data) {
2 
3 })

data为传递参数。

请求完成后，依据返回来的参数判断是否响应成功，若成功，可返回指定页面

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

基本上使用art.dialog整个流程到这里就结束了，接下来，具体谈下这几种ajax请求，和多选项时提交的情况。

多项选，selected情况的多选项情况：

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

checked多选项时情况：

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

ajax请求方法：

1 $.post("url",{'data':valueArr,'data2': value} ,function( data ) {
2 
3 },json);

应对form表单的提交，这里有一个更优的方法：

 1 var FormValue = $("#FormId").serialize();
 2 $.get ( "url",FormValue,function(data){
 3          data = eval("(" + data + ")");     //json decode
 4          if(data.code === 1001 ) {
 5                 window.location.href = '/url';
 6      }
 7          else {
 8               return false;
 9      }
10 });

其他ajax当然还有 $.ajax $.getAjax等，也可以直接用jquery 的submit事件实现表单提交。