art.dialog 与 ajax 异步请求

时间：2021-11-24 01:06:24

上周写了一些代码，涉及到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事件实现表单提交。

相关文章