`

artDialog打开Ajax提交的请求返还页面

阅读更多
方式一:
art.dialog.open(url,options),url是要请求的链接,若是需要传递参数,则需要url?a=xxx&b=yyy的形式传递;options中是对dialog属性的设置参数。此种方式打开的dialog是一个完整的iframe页面。
art.dialog.open('${ctx }/business/accept/distribute/' + id
+ "?assignStatus=2"
+ "&submit_pass=" + $("#submit_pass").val()
+ "&submit_deal=" + $("#submit_deal").val()
+ "&submit_opinion=" + submit_opinion, {
title : '流程分配',
id : 'distributeDialog',
lock : true,
width : '35%',
height : '30%'
});

方式二:
首先提交ajax请求,请求返还的页面作为dialog的content属性的内容,于是改dialog打开的就是请求需要打开的页面了。此种打开的dialog应该是一个div,而非一个完整的iframe页面。
$.ajax({
type : "get",
url : '${ctx }/business/accept/distribute/'+ id,
data : {
assignStatus : '2',
nextUser : $("#nextUser").val(),
nextUserName : $("#nextUserName").val(),
submit_pass : $("#submit_pass").val(),
submit_deal : $("#submit_deal").val(),
submit_opinion : $("#submit_opinion").val()
},
async : false,
success : function(data) {
var dialog = art.dialog({
title : '流程分配',
id : 'distributeDialog',
content : data,
width : '40%',
height : '40%',
lock : true,
opacity : 0.87, // 透明度
init : function() {
}
});
}
});

方式三:
首先在主页面隐藏该内容,如:
<div id="dis_dialogid" style="display:none;">
       <form id="distributeForm" method="post" action="${ctx}/business/accept/disSubmit">
       <div class="information-form">
             <div class="col-md-8 ie8correct">
<label class="field-title" for="nextUserName">人工定义:</label>
<input type="text" name="nextUserName" id="nextUserName" value="${order.nextUserName}" onclick="uiBase.selectUser('nextUser');" required>
<input type="hidden" id="nextUser" name="nextUser" value="${order.nextUser}" />
</div>
</div>
       </form>
    </div>
当点击某一部位触发事件时,显示该隐藏内容,触发事件的处理方式为:
var dialog10 = art.dialog({
            title:"流程分配",
            padding: "10px",
            content:document.getElementById("dis_dialogid"),
            ok:function(){              
                if ($("#distributeForm").valid()) {
                    $.ajax({
type : "POST",
url : "${ctx}/business/accept/disSubmit",
data : {
id : $("#id").val(),
assignStatus : '2',
nextUser : $("#nextUser").val(),
nextUserName : $("#nextUserName").val(),
submit_deal : $("#submit_deal").val(),
submit_pass : $("#submit_pass").val(),
submit_opinion : $("#submit_opinion").val()
},
cache : false,
global : false, //屏蔽全局事件,防止启动BlockUI
success : function(data) {
var resultJson = eval("(" + data + ")");
if (resultJson.result == "success") {
art.dialog({
title : '流程提交提示',
icon : 'succeed',
lock : true,
content : '流程提交成功,1.5秒后会自动关闭……',
time : 1.5
});
//uiBase.trigerParentTabFunc('$("form").submit()');
uiBase.closeCurrentTab();
} else {
art.dialog({
title : '流程提交提示',
icon : 'error',
lock : true,
content : '流程提交失败,1.5秒后会自动关闭……',
time : 1.5
});
}
}
});
                    return true;
                }else{
                    return false;
                }
            },
            okVal:"提交",
            cancel:function(){},
            cancelVal:"返回",
            id: "validate-artdialog"
        });

分享到:
评论

相关推荐

    解决js ajax同步请求造成浏览器假死的问题

    在Web开发中,JavaScript的AJAX技术允许我们异步地加载数据或请求服务器,以更新网页的某个部分而不必重新加载整个页面。在正常情况下,我们推荐使用异步请求,因为它们不会阻塞用户界面,从而允许用户继续与页面上...

    按钮的Ajax请求时一次点击两次提交的解决方法

    这是因为如果未正确处理,一个简单的按钮点击可能会导致Ajax请求和表单提交同时发生,造成不期望的重复提交问题。 当使用HTML表单提交数据时,点击类型为submit的按钮默认会触发表单的提交。在使用JavaScript的Ajax...

    Ajax请求数据小实例

    使用Ajax get请求数据的小例子,使用$.each()循环显示到表格,里面有接口,大家可以使用,欢迎指导学习

    Ajax异步请求

    Ajax异步请求是一种基于JavaScript和XMLHttpRequest对象的技术,允许Web应用程序在不刷新整个页面的情况下,更新页面的一部分内容。它可以实现异步通信,提高用户体验和页面加载速度。 在Ajax异步请求中,...

    Asp+ajax提交表单实例

    Asp提供了服务器端的脚本处理能力,而Ajax则允许在不刷新整个页面的情况下进行数据的异步更新,提升了网页的响应速度和用户体验。接下来,我们将深入探讨Asp+Ajax提交表单的实例,以及如何实现这一功能。 首先,...

    chrome扩展插件获取ajax请求记录

    以"Network"面板为例,这是Chrome开发者工具的一个核心部分,它可以详细展示页面加载过程中的所有网络活动,包括Ajax请求。每条请求都包含请求方法(GET、POST等)、URL、状态码、响应时间、响应头和请求头等信息。...

    一个完整的jquery+ajax传送请求的实例

    本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据通信。 首先,jQuery是一个强大的JavaScript库,它为DOM操作、事件处理、动画效果和Ajax交互提供了...

    实例详解Android Webview拦截ajax请求

    Android Webview虽然提供了页面加载及资源请求的钩子,但是对于h5的ajax请求并没有提供干涉的接口,这意味着我们不能在webview中干涉javascript发起的http请求,而有时候我们确实需要能够截获ajax请求并实现一些功能...

    springmvc接收ajax请求注意事项

    SpringMVC 接收 Ajax 请求注意事项 SpringMVC 框架在处理 Ajax 请求时需要注意一些重要的配置和设置,以确保请求的正确处理和数据的正确传输。下面我们将介绍在 SpringMVC 中接收 Ajax 请求的注意事项。 基本数据...

    ajax提交form表单和上传图片

    在Web开发中,异步JavaScript和XML(Ajax)技术被广泛用于提高用户体验,尤其是在处理表单提交和文件上传时。本教程将详细讲解如何利用jQuery、jQuery Form插件以及Spring MVC框架来实现Ajax提交表单并上传图片。...

    Ajax请求过程中显示“进度”的简单实现

    在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发,用户不能频繁点击该按钮产生多个并发Ajax请求);调用完成后,图片消失...

    ajax提交表单小例子

    在“ajax提交表单”这个场景中,我们需要关注的是POST请求,因为表单提交通常涉及到向服务器发送数据。以下是使用JavaScript实现的一个简单例子: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;AJAX提交表单示例 请...

    ajax快速解决参数过长无法提交成功的问题

    在ajax中使用post方法,用常规的参数格式:param1=a1&param2=a2 ,当参数长度过长时,依然提交不成功。比如我们经常这样写一个ajax的post请求: $.ajax({ type: "post", // post or get contentType:"application...

    解决ajax跨域请求问题

    在Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛用于实现页面的异步更新,使得用户无需刷新整个页面就能获取和提交数据。然而,跨域请求是Ajax的一个常见问题,由于浏览器的同源策略限制,Ajax请求...

    利用ajax提交表单完整流程

    在现代Web开发中,AJAX(Asynchronous JavaScript and XML)技术是不可或缺的一部分,它允许我们在不刷新整个页面的情况下与服务器进行异步数据交换。本文将详细介绍如何利用AJAX提交表单的完整流程,以实现更加流畅...

    如何在Thymeleaf中实现ajax请求url的可靠构造

    在Thymeleaf中构建可靠的Ajax请求URL是Web开发中的一个重要环节,特别是在使用Spring Boot和其他MVC框架时。Thymeleaf是一个强大的服务器端模板引擎,它可以与Ajax结合使用,提供动态更新页面的能力,而无需刷新整个...

    JQuery UI 实现Ajax提交详细步骤

    例如,用户列表的分页或筛选功能,可以通过AJAX请求获取新的数据,无须刷新整个页面。 总的来说,DWZ结合JQuery UI的Ajax提交,使得Web应用能实现流畅的用户体验,无需页面刷新即可完成数据的增删改查操作。这大大...

    ajax提交中文到servlet

    在Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛用于实现页面的无刷新更新,提高用户体验。本文将深入探讨“ajax提交中文到servlet”的相关知识点,以解决在异步传输过程中处理中文字符的问题。 ...

    利用HttpSession实现Ajax请求重定向.docx

    这种方法可以应用于各种场景,例如在表单提交后重定向到新的页面,或者在 Ajax 请求成功后重定向到新的页面。 优点: * 实现了 Ajax 请求重定向 * 可以在控制器中存放数据到 HttpSession 中 * 可以在新的页面中...

    解决ajax请求后台,有时收不到返回值的问题

    jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现

Global site tag (gtag.js) - Google Analytics