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

需要jquery支持

-----

调用方式

---------

<a href='http://qidizi.blog.163.com/blog/#1' onclick='edit(this,1)'>修改</a>

function edit(objA,id){
var obj = {
url:site_url + 'index.PHP/test/admin/edit',
locker:objA,
fullScreenTitle:'编辑管理员',
data:{
id:id
},
sendedCall:function (){
$("#editForm").validate(
{
rules: {
pwdOld: {
required:true,
minlength:6
},
pwd:{
required:true,
pwded:{
required:true,
equalTo:'#pwdEdit'
}
},
submitHandler: function(form) {
var obj = {
url:site_url + 'index.PHP/test/admin/edited',
locker:form,
data:{
'id':form['editId'].value,
'pwdOld':form['pwdOld'].value,
'pwd':form['pwd'].value,
'pwded':form['pwded'].value
},
okCall:function(data){
$('#saveTip').html(data);
}
};

ajax_http(obj);
}
}
);
}
};
ajax_http(obj);
}

-----------

------------------
用到的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,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,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" onclick="$(\'#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" onsubmit="return false;" >
<input type="hidden" value="<?PHP echo $lists->id;?>" name='editId' />
<table>
<tr>
<td>名字</td>
<td><?PHP echo $lists->user;?></td>
<td>&nbsp;</td>
<tr>
<tr>
<td>旧密码</td>
<td><input type="password" name=pwdOld /></td>
<td><span class="pwdOldERR"></span>&nbsp;</td>
<tr>
<tr>
<td>新密码</td>
<td><input type="password" name=pwd id=pwdEdit /></td>
<td><span class="pwdERR"></span>&nbsp;</td>
<tr>
<tr>
<td>确认密码</td>
<td><input type="password" name=pwded /></td>
<td><span class="pwdedERR"></span>&nbsp;</td>
<tr>
<tr>
<td colspan=3>
<button>保存</button>

</td>
<tr>

<tr>
<td colspan=3 id=saveTip >&nbsp;</td>
<tr>

</table>
</form>

--------

编辑保存静态提示

------

--------

载入状态提示和禁用(某些对象未测试,像select可能会有问题)

----------

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

全屏前置显示(覆盖掉后面的内容,也可以使用遮罩层透明)

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