JQuery异步提交表单、HTML提交表单到新窗口或IFrame

RIA 专栏收录该内容
17 篇文章 0 订阅

一个工具类,据说JQuery框架,实现异步表单提交,同时添加将表单数据提交到新窗口和IFrame的方法

// 定义函数命名空间
Kevin = new Object();

/**
 * 异步提交表单
 */
Kevin.submitAjaxForm=function(formId, url, succback, isunlock){
	 jQuery.ajax({
        url: url,   // 提交的页面
        data: $("#" + formId).serialize(), // 从表单中获取数据
        type: "POST", // 设置请求类型为"POST",默认为"GET"
        dataType: "json",
        contentType: "application/x-www-form-urlencoded;charset=UTF-8", // 必须要设置为UTF-8,否则提交数据乱码
        beforeSend: function(){
        	if(!isunlock){
        		new screenClass().lock();
        	}
        },
        error: function(msg) {      // 设置表单提交出错
            new screenClass().unlock();
			alert("执行出错:" + msg.responseText);
        },
        success: function(resp) {
        	 if(!isunlock){
        		 new screenClass().unlock(); // 设置表单提交完成使用方法
        	 }
	       	 if(resp.success == false){
	       		alert("执行失败:" + resp.resultMsg);
	       	 }else if(resp.success == true){
	       		 if(succback == '' || typeof(succback) == "undefined"){
	       			window.location.href="success.jsp";
	       		 }else{
	       			 succback(resp.attributes);
	       		 }
	       	 }else{
	       		 alert("未知结果:" + resp);
	       	 }
        },
        cache: false
    });
}


/**
 * 将表单提交到新的窗口
 */
Kevin.submitToWindow=function(form, title, url, width, height){
	var title = title ? title : Math.floor(Math.random() * ( 1000 + 1));	
	var winObj = window.open("", title, "toolbar=no, menubar=no, scrollbars=yes , resizable=no,location=no, status=no");
	
	var ie = navigator.userAgent.toLowerCase();
	ie = ie.match(/msie ([\d.]+)/)
	if(!ie){
		alert('请使用IE内核浏览器');
	}else{
		winObj.resizeTo(width , height);
	}
	
	var bakTarget = form.target;
	var bakAction = form.action;
	form.action = url;
	form.target= title;
	form.submit();
	form.target= bakTarget;
	form.action = bakAction;
	
	return winObj;
}

/**
 * 将表单提交到框架
 */
Kevin.submitToIFrame=function(form, target, url){
	if(target){
		var bakTarget = form.target;
		var bakAction = form.action;
		form.action = url;
		form.target= target;
		form.submit();
		form.target= bakTarget;
		form.action = bakAction;
	}else{
		alert('iframe的id不能为空');
	}
}

/**
 * 屏幕处理类
 */
var screenClass = function(){
    /// 解锁
    this.unlock = function(){
        var divLock = document.getElementById("divLock");
        if(divLock == null) return;
        document.body.removeChild(divLock);
    };
    
    /// 锁屏
    this.lock = function(slow){
        var sWidth,sHeight;
        var imgPath = slow ? "img/waiting_slow.gif" : "img/waiting_fast.gif";
        sWidth  = document.body.clientWidth;
        sHeight = document.body.clientHeight;
        
        var bgObj=document.createElement("div");
        bgObj.setAttribute("id","divLock");
        bgObj.style.position="absolute";
        bgObj.style.top="0";
        bgObj.style.background="#cccccc";
        bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
        bgObj.style.opacity="0.6";
        bgObj.style.left="0";
        bgObj.style.width=sWidth + "px";
        bgObj.style.height=sHeight + "px";
        bgObj.style.zIndex = "100";
        document.body.appendChild(bgObj);
        var html = "<table border=\"0\" width=\""+sWidth+"\" height=\""+sHeight+"\"><tr><td valign=\"middle\" align=\"center\"><image src=\""+imgPath+"\"></td></tr></table>";
        bgObj.innerHTML = html;
        // 解锁
        bgObj.onclick = function(){
             //new screenClass().unlock(); // 应该等完成后再解锁
        };
    };
}


 

 

 

  • 2
    点赞
  • 2
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值