ajax[配置]+读取load提示+全屏显示

最新推荐文章于 2021-09-14 14:12:18 发布

qidizi

最新推荐文章于 2021-09-14 14:12:18 发布

阅读量637

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qidizi/article/details/8790449

版权

js 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

需要jquery支持

-----

调用方式

---------

-----------

ajax配置+读取load提示+全屏显示 - qidizi - qidizi 的博客

------------------
用到的ajax配置和全屏显示fun

--------------

/**
* ajax交互
* 参数为对象,对象可用属性,method:提交方式,默认是post; url:远程路径,默认本页;dataType:返回数据类型,默认html;
* locker:发送前禁用html对象,完成后自动解开,同时在此对象的左顶点显示load提示;okCall:成功后调用函数,传递一个data值;
* errorCall:出错后调用,传入event, XMLHttpRequest, ajaxOptions, thrownError;
* timeOut:超时时间,毫秒,默认120秒;sendCall:发送前调用;sendedCall:完成后调用
* loadGif:load.gif的路径; fullScreenTitle:okCall默认使用全屏显示显示方式,可以指定标题
*/
function ajax_http(obj){
    if ( ! obj.method){//设置默认提交方式
        obj.method = 'POST';
    }

    if ( ! obj.url){//缺省远程路径为本页面
        obj.url = document.URL;
    }

    if ( ! obj.dataType){//默认返回类型
        obj.dataType = 'html';
    }

    if ( ! obj.okCall){//成功回调
        obj.okCall = function (data){ fullScreenShow(this.fullScreenTitle, data) };
    }

    if ( ! obj.fullScreenTitle){
        obj.fullScreenTitle = '全屏提示信息';
    }

    if ( ! obj.errorCall){//失败回调
        obj.errorCall = function (event, XMLHttpRequest, ajaxOptions, thrownError){ alert('ajax出错了:' + XMLHttpRequest);};
    }

    if ( ! obj.timeOut){//超时,秒
        obj.timeOut = 120000;
    }

    if ( ! obj.loadGif){//load.gif路径
        obj.loadGif = document.URL.replace(/index\.php.*$/i,'') + 'images/ajax_load.gif';
    }

    for (var data in obj.data){
      obj.data[data] = encodeURIComponent(obj.data[data]);//编码过的数据必须使用php的urldecode解码成utf8字符,如果php字符集是gb2312时还需要把解码后的utf8转gb2312
    }

    $.ajax({
          locker:obj.locker,
          sendCall:obj.sendCall,
          sendedCall:obj.sendedCall,
          fullScreenTitle:obj.fullScreenTitle,
          loadGif:obj.loadGif,
          beforeSend:function(XMLHttpRequest){

              if (this.locker){//禁用,显示load

                  if ( ! $('#ajaxLoadGif').length){
                      var ajaxLoadGifHtml = '<div class="ajaxLoadGif" id="ajaxLoadGif" style="position: absolute;z-index:9999;overflow:hidden;">' +
                                            '<img src="http://qidizi.blog.163.com/blog/' +this.loadGif+ '" /><div>';
                      $('body').append(ajaxLoadGifHtml);
                  }else{
                    $('#ajaxLoadGif').css('display', '');
                  }

                  var height = $(this.locker).height();
                  var width = $(this.locker).width();
                  height = height < $('#ajaxLoadGif').height()?$('#ajaxLoadGif').height():height;
                  width = width < $('#ajaxLoadGif').width()?$('#ajaxLoadGif').width():width;
                  $('#ajaxLoadGif').css('top', $(this.locker).offset().top)
                                   .css('left', $(this.locker).offset().left)
                                   .css('height', height)
                                   .css('width', width);

                  this.locker.disabled = true;//附加,防止select还能选择;
              }

              if (this.sendCall){
                  this.sendCall.call(this, XMLHttpRequest);
              }
          },
          url:obj.url,
          type:obj.method,
          cache :false,
          dataType:obj.dataType,
          data:obj.data,
          contentType: "application/x-www-form-urlencoded; charset=UTF-8",
          success:obj.okCall,
          error:obj.errorCall,
          timeout :obj.timeOut,
          complete : function(XMLHttpRequest, status){

              if (this.locker){//启用,隐藏load
                  $('#ajaxLoadGif').css('display', 'none');
                  this.locker.disabled = false;//附加,防止select还能选择;
              }

              if (this.sendedCall){
                  this.sendedCall.call(this, XMLHttpRequest, status);
              }
          }
    });
}

/**
* 全屏显示提示信息
* title:标题
* data:html内容
*/
function fullScreenShow(title, data){
    data = '<fieldset class="fullScreenBody" style="margin:20px;">' +
           '<legend>' +title+ ' <a href="http://qidizi.blog.163.com/blog/#1" οnclick="$(\'#fullScreenDiv\').css(\'display\', \'none\');">关闭本窗口</a></legend>' + data + '</fieldset>';

    if ( ! $('#fullScreenDiv').length){
        var divHtml = '<div class="fullScreen" id="fullScreenDiv" ' +
                      ' style="position:absolute; top:0px;eft:0px;background-color:menu; width:100%;height:100%;z-index:9999;" >' +
                      data+ '</div>';

        $(document.body).append(divHtml);
    }else{
        $('#fullScreenDiv').html(data).css('display', 'block');
    }
}

---------------

全屏html

----

<form id="editForm" method="post" οnsubmit="return false;" >
<input type="hidden" value="<?php echo $lists->id;?>" name='editId' />
<table>
<tr>
    <td>名字</td>
    <td><?php echo $lists->user;?></td>
    <td> </td>
<tr>
<tr>
    <td>旧密码</td>
    <td><input type="password" name=pwdOld /></td>
    <td><span class="pwdOldERR"></span> </td>
<tr>
<tr>
    <td>新密码</td>
    <td><input type="password" name=pwd id=pwdEdit /></td>
    <td><span class="pwdERR"></span> </td>
<tr>
<tr>
    <td>确认密码</td>
    <td><input type="password" name=pwded /></td>
    <td><span class="pwdedERR"></span> </td>
<tr>
<tr>
    <td colspan=3>
    <button>保存</button>

    </td>
<tr>

<tr>
    <td colspan=3 id=saveTip > </td>
<tr>

</table>
</form>