十$.ajax模态/非模态框window.open()href属性submit()等提交请求及优劣及问题解决

Posted 爱笑的berg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了十$.ajax模态/非模态框window.open()href属性submit()等提交请求及优劣及问题解决相关的知识,希望对你有一定的参考价值。

1. $.ajax提交请求进行数据更新,并通过回调进行有效提示

技术分享图片
$.ajax({
            type: "post",
            url: dispacher,     
            data: {"insurCode" : tmp,
                   "currentPage" : currentpage,
                   "pageDirection" : ‘current‘
                },    
            success: function(data) {
                if(data == ‘OK‘ && dispacher==‘auditAction.do?action=updateById‘){
                    alert( ‘审核成功!点击确定刷新列表‘);
                    seachHeadPage(‘‘);//重新进行查询更新查询列表数据显示
                }else{
                    alert(‘审核失败,请稍后再试!‘);
                }
            },
            error: function(data) {
                alert("系统错误,请稍后再试!");
            }
       })
更新数据后的JAVA回写代码
boolean boo= auditService.updateAuditById(insurCode);
if(boo){
     response.getWriter().write("OK");
}else{
     response.getWriter().write("NO");
}
response.getWriter().flush();
response.getWriter().close();
View Code

$.ajax({})优劣:
优势:提交请求时,可以是实现回调,进而判断该请求是处理成功还是处理失败了
劣势:不支持流文件的回调。例如当你对生成的excle文件进行下载是使用$.ajax({})是无法实现的,除非...使用组合,将在该文的最后进行列举说明
2、模态提交请求弹出新窗口,且该窗口不关闭是无法对父页面/其他页进行操作

技术分享图片
操作1:父页面代码:
//通过模态框提交请求的代码:
var dispacher==‘auditAction.do?action=updateById‘;
var temp = window.showModalDialog(
    dispacher + "&insurCode=" + tmp + "&currentPage=" + currentpage +"&pageDirection=current",
    window,
    ‘dialogHeight=750px;dialogWidth=1000px;dialogRight=40px;dialogTop=30px;center:yes‘);
//子页面保存操作成功后刷新该页面的查询列表    
if (temp == ‘saveSuccess‘&& dispacher==‘auditAction.do?action=updateById‘) {
            seachHeadPage(‘‘);
}

操作2:
在弹出子页面中点击【保存】按钮,数据保存成功,并向父页面传递子页面数据保存成功标识‘saveSuccess‘
var isFinished  = "<c:out value=‘${isUpdate}‘/>";
if(isFinished == ‘true‘){
    load();
    alert("审核成功!");
    window.returnValue = ‘saveSuccess‘;
    window.close();
}else if(isFinished != ‘true‘&& isFinished !=""){
    alert("系统保存失败,请与系统管理员联系!");
}
子页面保存数据后的JAVA回写代码
boolean isUpdate= auditService.updateAuditById(insurCode);
map.put("isUpdate", isUpdate + "");
return new ModelAndView(this.auditDetail, map);
View Code

模态/非模态框语法:

技术分享图片
1)window.showModalDialog()方法用来创建一个显示html内容的模态对话框。 
2)window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。 
使用方法: 
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) 
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures]) 
参数说明: 
要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,
sURL--必选参数,类型:字符串。用来指定对话框要显示的文档的URL。 
vArguments--可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 
sFeatures-- 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。 
a、dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5以上是px,为方便其见,在定义modal方式的对话框时,用px做单位。 
b、dialogWidth: 对话框宽度。 
c、dialogLeft: 离屏幕左的距离。 
d、dialogTop: 离屏幕上的距离。 
e、center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。 
f、help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。 
g、resizable: {yes | no | 1 | 0 } 〔IE5+〕:是否可被改变大小。默认no。 
h、status: {yes | no | 1 | 0 } 〔IE5+〕:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 
i、scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。 
下面几个属性是用在HTA中的,在一般的网页中一般不使用。 
10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。 
11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。 
12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。
View Code

模态/非模态框优劣:
优势:可灵活的对弹框进行设置(大小、是否居中、滚动条)等,且能够传递参数给父页面,非常实用。
功能上的缺点暂时没有发现,书写上有点繁杂。

3、window.open()提交请求并新打开一个标签页

技术分享图片
function searchAuditNew(dispacher) {
    window.open(
                dispacher,
                ‘‘,
                ‘height=630,width=810,top=‘
                        + (screen.height - 630)
                        / 2
                        + ‘,left=‘
                        + (screen.width - 810)
                        / 2
                        + ‘,toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no,center=yes‘
                );
}    
View Code

window.open()语法:

技术分享图片
window对象的open()方法:用于打开一个新的浏览器窗口或查找一个已命名的窗口
用法1):
window.open("http://www.baidu.com","_blank");
            //默认就是开启一个新窗口,老窗口称为父窗口,新窗口称为子窗口
参数取值:
_blank -- 打开一个新窗体 
_parent -- 在父窗体中打开 
_self -- 在本页打开,此为默认值 
_top -- 在上层窗体中打开 
_search --同时打开搜索窗口

用法2):
window.open(URL,name,features,replace)
参数取值:
a、URL:一个可选的字符串
声明了要在新窗口中显示的文档的 URL。如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。
b、NAME:一个可选的字符串
该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。
这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。
c、features:一个可选的字符串
声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征
d、replace:一个可选的布尔值。
规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:
true - URL 替换浏览历史中的当前条目。 
false - URL 在浏览历史中创建新的条目。
View Code

window.open()优劣:
优势:是window本身具有的方法,兼容性强,父子之间数值传递操作容易实现(待补充)
缺点:无法实现子页面不关闭就无法对父页面操作这样的功能

4、href属性

技术分享图片
1)作为LINK标签的属性,指向所引用文件的URL地址
<LINK href="./jsp/css/page_style.css" type="text/css" rel="stylesheet">

2)base标签为页面上的所有链接规定默认地址或默认目标。
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
    <base href="<%=basePath%>">
</head>

3)a标签定义超链接,用于从一张页面链接到另一张页面
<a href="<%=path%>/auditAction.do?action=auditInfoView&pageDirection=first&currentPage=<c:out value=‘${currentpage}‘/>" class="a1">首页</a>
说明:如果该页面中添加了<base href="<%=basePath%>"> ,那么该超链接中是不需要添加<%=path>/的

4)window.location.href 属性来访问(Location 对象是 Window 对象的一个部分)
<input type=‘button‘ name=‘close‘ value=‘返回‘ onclick="javascript:window.location.href=‘input.do?action=inputView‘;" />
说明:
    "window.location.href"、"location.href"是本页面跳转
    "parent.location.href"是上一层页面跳转
    "top.location.href"是最外层的页面跳转
    "window.location.reload()"本页面重新加载
View Code

herf属性优劣

优势:灵活,页面中的链接跳转通常采用此种方法
劣势:当传递的参数较多时,代码显得不美观,且其提交参数方式为浏览器默认的方式(get请求),存在中文时会出现乱码问题,需要特殊处理window.location.href=dispatcher+"&custName="+encodeURI(custname)+"&isNormal="+encodeURI(isNormal);java.net.URLDecoder.decode(custname, "utf-8").trim();//属于rt.jar包中类

5、通过Form对象的submit()提交

技术分享图片
var frm=document.forms(‘tranDataFrom‘);
frm.action=‘hisAction.do?action=doSearch&pageDir=‘+pageDir;
frm.submit();
优劣:方便,无法实现实现回调;
View Code

6、jquery-form.js中的ajaxSubmit()

技术分享图片
<input type="hidden" id="isNormal" name="isNormal" value="<c:out value="notNormal"/>"/>
var isNormal="notNormal";//导出数是否超范围标识
$(function(){
    $("#inputFrom").ajaxSubmit(function(data){    
            if(data=="exportHuge"){  
                alert("查询结果数据量偏大,请缩小查询范围!");
            }else if(data=="normal"){
                isNormal="normal";
                $("#isNormal").val(isNormal);
                document.getEleById("inputFrom").submit();
            }
     });       
});
更新数据后的JAVA回写代码
if(auditList.size()>=65536&&"notNormal".equals(isNormal)){
    response.getWriter().write("exportHuge");
    response.getWriter().close();
    return null;
}else if("notNormal".equals(isNormal)&&auditList.size()<65536){
    response.getWriter().write("normal");
    response.getWriter().close();
    return null;
}else if ("normal".equals(isNormal)) {
    System.out.println("开始导出excle操作");
}
View Code

优势:提交请求时,可以是实现回调,进而判断该请求是处理成功还是处理失败了
劣势:不支持流文件的回调。但是可以通过组合触发请求的方式来实现

以上均是自己的均是自己的理解,可能有不准确的地方,如若发现请网友评论指出,谢谢!

 










以上是关于十$.ajax模态/非模态框window.open()href属性submit()等提交请求及优劣及问题解决的主要内容,如果未能解决你的问题,请参考以下文章

【读书笔记4】弹框体系总结:模态弹框和非模态弹框

C# 模态框传值

使用ajax请求,模态框调用并更改密码

Bootstrap 模态框强化

来自批处理脚本的非模态通知框

ajax及模态框