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

Posted 2020-12-29 爱笑的berg

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

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

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