Jsp页面弹出输入对话框的实现

最新推荐文章于 2023-07-18 17:41:50 发布
最新推荐文章于 2023-07-18 17:41:50 发布
阅读量1.5w 收藏 15
点赞数 1
文章标签： jsp function javascript input button servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FlyByDream/article/details/1731725
版权
  使用DHTML，可以有两种实现方法：
1. 通过window.open方法以弹出页面方式实现。
2. 通过window.showModalDialog方法以弹出对话框方式实现 。(推荐)
一.通过window.open方法弹出对话框
在写JSP页面的时候，有时需要点击一个按钮弹出一个输入对话框，然后输入一个值，确定后关闭对话框，把数据写入数据库，刷新当前页面。这样的功能可以用JavaScript实现；不过如果用js自带的对话框的话，对话框不美观，不如用一个JSP页面来做对话框。
   在页面AddName.jsp里要调用对话框，写一个JSP页面NewBox.jsp（用做对话框），然后在页面AddName.jsp里加上一段js代码：
/* 用来打开对话框页面*/
function openwindow(){ 
         window.open ("NewBox.jsp","Sample","fullscreen=no,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no, copyhistory=no,width=350,height=140,left=200,top=300");
       }             
/* 在NewBox.jsp里调用这个函数，用来刷新AddName.jsp*/     
function opensub(){
  document.form1.submit();
       }   
在这里要对window.open里的参数做一下说明：
   fullscreen=no 窗口模式，yes为全屏模式
   toolbar=no, 显示工具条
　　location=no,显示网址栏
　　directories=no,导航条
　　status=no,状态条
　　menubar=no,菜单
　　scrollbars=no,滚动条
　　resizable=no,是否可以改变大小
　　copyhistory=no,历史按钮
　　width=350,宽
　　height=140'高
　　left=200,距离左边200
　　top=300,距离顶端300
这时要在NewBox.jsp里加上一部分js代码，下面是NewBox.jsp的代码
  
<html>
  <head >
    <title> 新建邮件夹输入框</title>
    <SCRIPT>
      <!--
        function bconfirm(){
           opener.document.all['inboxname'].value=document.form1.inboxname.value;
           opener.opensub();
           window.close();
        }
       
       function bcancel(){
           window.close();
        }
      -->
    </SCRIPT>
  </head>                                
                   
  <body bgcolor=#66CD00>
    <FONT size=5>请输入新邮件夹的名称：</FONT>
    <FORM method=post name=form1 action="">
      <INPUT type=text name=inboxname size=35><p>
      <INPUT type=button name=inputboxbt value=确定 οnclick="bconfirm();">
      <INPUT type=button name=inputboxbs value=取消 οnclick="bcancel();">
    </FORM>
   
  </body>
</html>
在NewBox.jsp里先给AddName.jsp里的一个隐藏表单inboxname赋值，就是这句：
  opener.document.all['inboxname'].value=document.form1.inboxname.value;
   然后调用AddName.jsp里的一个js函数：opener.opensub(); 
这样AddName.jsp就会自动提交表单到Servlet接着刷新页面，这样就完成了！


 二.通过window.showModalDialog方法弹出对话框。（推荐）
    仍然是在页面AddName.jsp里要调用对话框，写一个JSP页面NewBox.jsp（用做对话框），然后在页面AddName.jsp里加上一段js代码：
/* 用来打开对话框页面，注意这回openwindow()函数里的的方法是window.showModalDialog*/
 
function openwindow(){ 
         window.showModalDialog("NewBox.jsp",window,"status:no;scroll:no;
dialogWidth:235px;dialogHeight:100px");
       }             
/* 在NewBox.jsp里调用这个函数，用来刷新AddName.jsp*/     
function opensub(){
  document.form1.submit();
       }

 对window.showModalDialog里的参数简单做一下说明： 
center : yes | no | 1 | 0 | on | off  指定对话框是否显示于桌面正中。默认值为 yes 。
dialogHide : yes | no| 1 | 0 | on | off  指定当打印或打印预览时对话框是否隐藏。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。
edge : sunken | raised  指定对话框窗口边框样式为凹下还是凸起的。默认值为 raised 。
resizable : yes | no | 1 | 0 | on | off   指定对话框是否可以被用户改变尺寸。默认值为 no 。
scroll : yes | no | 1 | 0 | on | off   指定对话框是否显示滚动条。默认值为 yes 。
status : yes | no | 1 | 0 | on | off  指定对话框是否显示状态条。对于不被信任的对话框默认值为 yes 。对于被信任的对话框默认值为 no 。
unadorned : yes | no | 1 | 0 | on | off   指定对话框是否显示 chrome 样式边框。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。

另外，在NewBox.jsp的javaScript代码bconfirm()方法中：
<SCRIPT>
      <!--
        function bconfirm(){
          dialogArguments.addNameform.inboxname.value=document.form1.
inboxname.value;
           dialogArguments.opensub();
           window.close();
        }
        function bcancel(){
           window.close();
        }
      -->
    </SCRIPT>

注:addNameform为AddName.jsp中隐藏表单name，使用window.showModalDialog方法是要用dialogArguments传递参数。其他部分不变。
 
 
FlyByDream
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用html+css+js实现自定义弹出对话框/输入框
09-03
使用html+css+js实现自定义弹出对话框/输入框，使用html+css+js实现自定义弹出对话框/输入框，使用html+css+js实现自定义弹出对话框/输入框
jsp页面使用layui实现弹出层alert提示框
最新发布
u014388322的专栏
12-26 1536
本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；🍅。
js实现页面弹框
qq_75222206的博客
07-18 1644
页面弹框是前端网页制作很常见的一个部分。点击按钮后自动弹出弹框，弹框中可以输入想输入的东西。那就让我们一起看看该如何去制作。
鼠标点击网页任意地方都是光标闪烁输入状态
stefanie_sun723的博客
12-14 4746
按F7解决
简单的悬浮窗+拖动
土豆你个卜奈奈的博客
11-30 508
1.布局 &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com...
jsp中文本框与按钮的使用方法
girls的博客
05-19 6693
说明: 文本框与按钮都是通过< input >组件实现的,改变其type属性值可以对应不同的组件信息 下面通过一个实例来看一下文本框与按钮的使用: 要求: 在文本框输入一个数字,输出该数字的2倍数值. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <
关于Jsp中的三种弹框
weixin_34319999的博客
10-24 106
对话框有三种 1：只是提醒，不能对脚本产生任何改变； 2：一般用于确认，返回 true 或者 false ，所以可以轻松用于 if...else...判断 3：一个带输入的对话框，可以返回用户填入的字符串，常见于某些留言本或者论坛输入内容那里的 插入UBB格式图片   下面我们分别演示： &lt;%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%&gt; &lt;!D...
jsp点击按钮弹出输入框_【问答3】需要点击虚拟键盘上发送（搜索）按钮的写法...
weixin_39673184的博客
12-01 539
▲点击上方“三分钟学堂”关注公众号本期问题如下：大概意思就是app没有搜索按钮，需要借用输入法的虚拟按钮，可以使用inputtext命令输入，虚拟键盘不出来，问怎么办？解答：这个问题的主要原因是inputtext命令是基于按键输入法有效的，当使用这个命令的时候，默认会切换到按键输入法，使得原本有虚拟键盘的输入法不能使用了。解决思路也很简单，就是在输入完内容以后，用命令把按键输入法切换成...
js弹出页面
wzq526861919的专栏
04-29 441
弹出页面代码 弹出窗口代码window.open(‘page.html’,’newwindow’,’height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location
js 弹出页面+弹出窗口
01-19
提交成功后弹出页面+弹出窗口 弹出页面+弹出窗口 弹出页面+弹出窗口
自定义弹出输入框
02-27
自定义弹出输入框，直接使用，只需修改自己的弹出框的样式及框内操作即可
jsp页面同时弹出页面和对话框
11-30
jsp页面如何实现点击一个按钮同时弹出一个页面和一个对话框
js弹出一个新页面并获得弹出页面的值
12-16
js弹出一个新页面并获得弹出页面的值js弹出一个新页面并获得弹出页面的值
点击按钮弹出对话框代码
03-06
点击按钮弹出对话框代码
jsp+sql+javabean用户登录页面
05-28
用户在登录页面login.jsp的两个文本框中分别输入用户名和密码，若输入正确（即：输入的数据和数据库中的数据相一致,使用JavaBean验证）则弹出对话框，显示提示信息“登录成功，确定后即可进行管理操作！”，否则提示...
JSP购物车源代码
08-08
（3）将弹出“附加数据库”对话框，在该对话框中单击“ ”按钮，选择所要附加数据库的.mdf文件，单击“确定”按钮，即可完成数据库的附加操作。 将程序发布到Tomcat下 （1）将01文件夹拷贝到Tomcat安装路径下的...
ajax-jsp-servlet-mysql_project
05-26
（3）注册成功之后，弹出一个对话框，显示“恭喜你，，注册成功”，并实现跳转到登录页面。（4）注册页面，对用户名进行检测，在数据库里面重复的用户名，弹出对话框。提示“用户名已经存在，请重新填写”。（5）...
jsp+sql网络在线考试
05-11
（4）单击Tomcat Manager超链接，弹出“连接到 localhost”对话框。 （5）在用户名及密码处输入登录Tomcat的用户名和密码，单击【确定】按钮。 （6）进入“Tomcat应用程序管理”页面，在此页面中单击“08”，进入本...
4. 使用SpringMVC框架技术完成JSON数据交互。在页面中输入用户名和密码，页面可以弹出对话框显示用户名和密码数据，控制台也会显示相应数据。
06-07
可以使用SpringMVC框架技术完成JSON数据交互，具体实现步骤如下： 1. 在pom.xml文件中添加相关依赖： ```xml <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.3.9</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.12.5</version> </dependency> ``` 2. 在Spring配置文件中配置视图解析器和JSON消息转换器： ```xml <!-- 配置视图解析器 --> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/views/" /> <property name="suffix" value=".jsp" /> </bean> <!-- 配置JSON消息转换器 --> <bean id="jsonConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"> <property name="supportedMediaTypes"> <list> <value>application/json;charset=UTF-8</value> </list> </property> </bean> <!-- 配置HandlerAdapter --> <bean id="handlerAdapter" class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"> <property name="messageConverters"> <list> <ref bean="jsonConverter"/> </list> </property> </bean> ``` 3. 在Controller中编写处理请求的方法： ```java @Controller @RequestMapping("/user") public class UserController { @RequestMapping("/login") @ResponseBody public Map<String, Object> login(String username, String password) { Map<String, Object> result = new HashMap<>(); result.put("username", username); result.put("password", password); return result; } } ``` 在上述代码中，使用@Controller注解标注该类为控制器，使用@RequestMapping注解标注该类的请求路径为/user。在login方法中，使用@RequestMapping注解标注该方法的请求路径为/login，并使用@ResponseBody注解标注该方法返回的是JSON格式的数据。在方法中，将用户名和密码封装为一个Map对象，并返回该对象。 4. 在页面中使用AJAX技术发送请求，并处理返回的JSON数据： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Login</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { $("#loginBtn").click(function() { var username = $("#username").val(); var password = $("#password").val(); $.ajax({ url: "/user/login", type: "POST", data: { "username": username, "password": password }, dataType: "json", success: function(data) { alert("用户名：" + data.username + " 密码：" + data.password); }, error: function() { alert("请求失败"); } }); }); }); </script> </head> <body> <div> <label>用户名：</label> <input type="text" id="username"> </div> <div> <label>密码：</label> <input type="password" id="password"> </div> <div> <button id="loginBtn">登录</button> </div> </body> </html> ``` 在上述代码中，使用jQuery库中的$.ajax方法发送POST请求到/user/login路径，将用户名和密码作为请求参数传递。在请求成功后，使用alert方法弹出对话框显示用户名和密码数据。 5. 运行程序，在浏览器中访问页面，输入用户名和密码，点击登录按钮，即可弹出对话框显示用户名和密码数据，控制台也会显示相应数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值