在同一页面上提交表单后弹出方式

我想要什么：

当我点击提交我的网页的形式，它会去servlet和数据库加载数据。然后作为加载的确认，它显示出成功模式。我想实现一些servlet不重定向的东西。也就是说，它保持在同一页面上并显示弹出的“数据成功”模式。

我正在使用response.sendRedirect重定向到我的servlet 中的另一个页面，但我不想重定向，我想留在同一页面并弹出一个窗体页面。

2014-02-17 Pabitra Padhy

你为什么不重定向到SELF，并返回一个位值说，它需要加载弹出一个警告框在用户端。在页面加载检查这一点，并调用jQuery中的弹出窗口。 **参考：http：//api.jqueryui.com/dialog/** – dreamweiver

你可以很容易地通过使用jquery-ui来实现。

您可以通过两种方式添加jQuery的用户界面：

1）将这个链接您的<head>标签

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 

<script src="//code.jquery.com/jquery-1.9.1.js"></script> 

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

2的内侧）下载的文件，并将它们添加到您的网站（同上，但文件将在您的域名）。推荐

你里面你在任何地方创建一个空的div <body>标签：

<div id="modal_popup"> 
</div>

然后，添加以下代码。

<script type="text/javascript"> 
$(document).ready(function() { 
    $(function() { 
    $("#modal_popup").dialog({ 
     autoOpen: false, 
     height: 140, 
     modal: true, 
     title: "The title of your modal popup", 
     open: function(){ 
     $("#modal_popup").append("The text that you want in the modal."); 
     } 
    }); 
    }); 
    $("#submit_id").click(function(){ $("#modal_popup").dialog('open'); }); 
}); 
</script>

编辑

<script type="text/javascript"> 
    function pop_up_modal() { 
    $("#modal_popup").dialog({ 
     height: 140, 
     modal: true, 
     title: "The title of your modal popup", 
     open: function(){ 
     $("#modal_popup").append("The text that you want in the modal."); 
     } 
    }); 
    }; 
</script>

你可以调用pop_up_modal()上的任何地方你的servlet。

来源

2014-02-17 07:54:37 J2D8T

我感谢您的支持.. :)但是，如果我明白你说什么...你的意思是提交按钮，它会加载模式。并且servlet会在后台完成它的工作.. 但是我指的是，如果数据没有通过servlet正确加载到数据库中（说出了一些错误），那么它仍然会显示模式，因为它与html页面，但不包含servlet的响应。如果有什么办法解决这个问题..你真的很欢迎.. :) –

即：我的意思是说... 如果数据加载成功 if（rs> 1）然后在同一个html表单页面上的成功模式，以及在X时间重定向到家庭之后成功模式如果为false，则错误模式在同一个html表单页面上并重定向到再次形成页面。 :) 简单，因为.. :) –

您不必在提交按钮上运行脚本。您可以将它放在将数据加载到数据库的页面上，并在数据提交后立即执行。然后，您可以使用'response.sendRedirect'获得成功或失败消息模式并从那里重定向。 – J2D8T

使用Bootstrap莫代尔

基本上你可以使用一个按钮data-toggle="modal" data-target="#myModal"或通过JS直接致电：

$('#myModal').modal('show');

Test it here.

来源

2014-02-17 08:01:27

在同一页面上提交表单后弹出方式

回答

相关问题