获取浏览器提交的参数

获取浏览器提交的参数

通过一个登录功能,学习 Servlet 如何获取从浏览器提交的账号密码。

创建 login.html

在 web 上右键 -> New -> File,创建一个 login.html 文件,然后添加一个 form 表单元素。

  • action="login" 标题会提交到 login 路径,login 路径会映射到 LoginServlet
  • method="post",post 方式提交的密码信息不会在浏览器地址栏显示

账号和密码使用 input 元素.在 Servlet 端为了区分账号和密码,要给这两个 input 元素的 name 属性分别叫做 usernamepassword

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>登录页面</title>
</head>
<body>
  <form action="login" method="post">
    账号: <input type="text" name="username" /> <br />
    密码: <input type="password" name="password" /> <br />
    <input type="submit" value="登录" />
  </form>
</body>
</html>

创建 LoginServlet

HelloServlet 操作一样创建一个 LoginServlet

浏览器中的 formmethodpostLoginServlet 需要提供一个 doPost 方法。

doPost 方法中,通过 request.getParameter 根据 name 取出对应的账号和密码。然后用 System.out.println() 打印在控制台,这里并没有在网页上输出。

import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
  
public class LoginServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
  
        System.out.println("username:" + username);
        System.out.println("password:" + password);
    }

}

映射 LoginServlet 到路径 “/login”

在 web.xml 中新增映射。

<?xml version="1.0" encoding="UTF-8"?>
<web-app>

  <servlet>
    <servlet-name>HelloServlet</servlet-name>
    <servlet-class>HelloServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>HelloServlet</servlet-name>
    <url-pattern>/hello</url-pattern>
  </servlet-mapping>
  
  <servlet>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>LoginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/login</url-pattern>
  </servlet-mapping>   

</web-app>

在页面提交数据

首先重启 Tomcat,然后访问页面 http://127.0.0.1/xxx/login.html。输入账号密码,点击提交,然后在 Tomcat 的控制台窗口,就可以看到提交的账号和密码。

如果要在浏览器上要看到 Tomcat 的反馈数据,需要通过响应来实现。

<think> 我们正在讨论FineReport报表软件中如何获取浏览器窗口的宽度和高度。 在FineReport中,通常通过JavaScript来获取浏览器窗口的尺寸,因为FineReport支持在Web端展示报表,并且提供了JavaScript API。 方法: 1. 使用JavaScript的全局对象:`window.innerWidth`和`window.innerHeight`可以分别获取浏览器窗口的内部宽度和高度(包括滚动条,但不包括工具栏等)。 2. 在FineReport中,我们可以在填报事件、超级链接事件、或者自定义事件中编写JavaScript代码来使用这些属性。 例如,在某个按钮的点击事件中,我们可以这样写: ```javascript // 获取浏览器窗口的宽度和高度 var width = window.innerWidth; var height = window.innerHeight; // 然后你可以使用这些值,比如弹出提示框 alert("浏览器宽度: " + width + ", 高度: " + height); ``` 另外,FineReport还提供了FR对象,其中包含一些与报表环境相关的属性和方法。但是,获取浏览器窗口尺寸并不依赖于FR对象,而是直接使用标准JavaScript。 注意:如果需要兼容旧版浏览器(如IE8),可能需要做特殊处理,但现代浏览器都支持上述属性。 如果是在FineReport的决策报表(即表单形式)中,我们可能需要将获取到的尺寸用于调整报表组件的大小,这时可以结合FineReport的JS API来调整组件属性。 示例:在决策报表中,根据浏览器窗口大小调整某个组件的大小 ```javascript // 假设我们有一个组件,其widgetName为'widget0' var width = window.innerWidth; var height = window.innerHeight; // 设置组件的大小,这里我们取窗口的一半作为示例 // 注意:实际应用中可能需要减去其他元素占用的空间 var newWidth = width * 0.5; var newHeight = height * 0.5; // 获取组件对象 var widget = FR.Widget.getWidgetByName("widget0"); // 设置组件大小 widget.setWidth(newWidth); widget.setHeight(newHeight); ``` 因此,获取浏览器长宽的方法主要依赖于JavaScript,在FineReport的事件编辑器中编写相应的JS代码即可。 注意:在FineReport中,有些事件可能是在iframe中触发的,这时直接使用`window.innerWidth`可能获取的是iframe的窗口大小,而不是整个浏览器窗口的大小。在这种情况下,我们可以使用`top.window.innerWidth`来获取顶层窗口的尺寸(注意跨域问题)。 如果报表是嵌在iframe中的,且同源,则: ```javascript var width = top.window.innerWidth; var height = top.window.innerHeight; ``` 总结:在FineReport中获取浏览器长宽,使用JavaScript的`window.innerWidth`和`window.innerHeight`(或`top.window`)即可。 §§相关问题§§ 1. 在FineReport中如何通过JavaScript获取屏幕分辨率? 2. 如何根据浏览器窗口大小调整决策报表的布局? 3. FineReport中如何动态改变组件的大小? </think> 在FineReport中获取浏览器窗口宽度和高度主要通过JavaScript实现,具体方法如下: ### 方法实现 ```javascript // 获取浏览器窗口宽度和高度 var browserWidth = window.innerWidth || document.documentElement.clientWidth; var browserHeight = window.innerHeight || document.documentElement.clientHeight; // 使用示例(在按钮点击事件中调用) function getBrowserSize() { var width = window.innerWidth || document.documentElement.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight; // 输出结果(实际使用时替换为需要的操作) alert("宽度: " + width + "px\n高度: " + height + "px"); } ``` ### 应用场景 1. **报表自适应**:根据窗口大小动态调整报表布局 ```javascript // 决策报表初始化时调整组件大小 window.onresize = function() { var canvas = this.document.getElementById("report-container"); canvas.style.width = (window.innerWidth - 30) + "px"; }; ``` 2. **移动端适配**:针对不同屏幕尺寸加载不同模板 ```javascript if (window.innerWidth < 768) { window.location.href = "mobile.cpt"; // 加载移动端模板 } ``` ### 使用说明 1. **添加位置**: - 决策报表的`初始化后`事件 - 按钮的`点击事件` - 参数面板的`控件事件` 2. **兼容性**: - `window.innerWidth/Height` 支持现代浏览器 - `document.documentElement.clientWidth/Height` 兼容旧版IE 3. **实际应用**: ```javascript // 动态设置报表参数 var param = { "width": window.innerWidth, "height": window.innerHeight }; _g().parameterCommit(param); // 提交参数到报表 ``` ### 注意事项 - 在iframe嵌入场景需使用`parent.window.innerWidth`获取父窗口尺寸 - 建议配合`window.onresize`事件实现实时响应 - 移动端需考虑设备像素比(DPR):`window.devicePixelRatio` > 完整文档参考:[FineReport JS API](https://help.fanruan.com/finereport/)
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值