jsp页面跳转回写数据传输模型

最新推荐文章于 2023-03-09 19:57:17 发布
最新推荐文章于 2023-03-09 19:57:17 发布
阅读量525 收藏
点赞数 1
文章标签： java javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hwano/article/details/127329955
版权

需求：

通过跳转窗口，将必要信息回写到主页面中（必要字段为只读）
目前此示例模型不含后端数据传输，只有前端三个jsp页面

实现步骤：

  1. 主页面跳转到第二个页面
  2. 第二个页面通过查询条件，跳转到第三个页面
  3. 第三个页面中显示所有查询结果，双击某条数据，将内容回填到第二个页面
  4. 第二个页面会显示此条数据所有信息，点击保存回填到主页面

知识点：

打开新窗口
window.open(URL,name,specs,replace)

获取页面中id为UnitName的值
document.getElementById(“UnitName”).value;

获取页面中第0个name为customerName的值
document.getElementsByName(“customerName”)[0].value;

返回打开当前窗口的窗口对象
window.opener

mainPage.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页</title>
</head>
<body style="text-align: center;">
<tr>
    <td align=center>
        <input type="hidden" id="address" name="address" value="">
    </td>
</tr>
<input type="button" name="payeeInfo" class="button" value="组织机构信息" onClick="openSubquery();"/>
<table align="center">
    <tr>
        <td class=title>组织机构名称：</td>
        <td class=input><input type="text" class="common" readonly="readonly"
                               name="customerName"
                               maxlength="20"></td>
    <tr>
        <td class=title>注册资本金：</td>
        <td class=input><input type="text" class="common"
                               name="registeredFunds"
                               id="registeredFunds"
                               maxlength="80"
                               readonly="readonly"><br/></td>
    </tr>
    <tr>
        <td class=title>备注：</td>
        <td class=input><input type="text" class="common"
                               id="remarks"
                               maxlength="80"></td>
    </tr>
    <tr>
        <td colspan="4"><input type="button" value="保存到数据库"
                               onClick="return saveForm()" class="button" style="cursor: hand;float: right"></td>
    </tr>
</table>
</body>
</html>
<script language="javascript">
    function openSubquery() {
        var url = "/untitled1_war_exploded/window/subpage.jsp";
        window.open(url, "客户信息查询", "top=100,left=100,status=no,toolbar=no,menubar=no,resizable=1,location=0,directories=0,scrollbars=yes,width=800,Height=600");
    }

    function saveForm() {
        var address = document.getElementById("address").value;
        var customerName = document.getElementsByName("customerName")[0].value;
        var registeredFunds = document.getElementById("registeredFunds").value;
        var remarks = document.getElementById("remarks").value;
        if (trim(customerName) === "") {
            alert("请选择组织机构名称!此项为必录项，请检查!");
            return false;
        }
        address = "注册地为：" + address;
        alert(address)
    }
</script>
<script src="${pageContext.request.contextPath}/js/common.js"></script>

subpage.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>子页</title>
</head>
<body>
<form action="" method="post" name="fm">
    <div id="divName">
        <table cellpadding="3" cellspacing="1" class="common">
            <tr>
                <td class=listtitle colspan="4">组织机构基本信息</td>
            </tr>
            <tr>
                <td class=title>机构名称</td>
                <td class=input>
                    <input type="text" class="common" name="customerName" id="customerName">
                </td>
                <input type="hidden" class="common" name="industry" id="industry">
                <td class=title>行业名称</td>
                <td class=input>
                    <input type="text" class="codename" name="industryName" value="">
                </td>
            </tr>
            <tr>
                <td class=title>住所（注册地）</td>
                <td class=input>
                    <input type="text" class="common" name="address" id="address">
                </td>
                <td class=title>经营范围</td>
                <td class=input>
                    <input type="text" class="common" name="businessScope" id="businessScope">
                </td>
            </tr>
            <tr>
                <td class=title>注册资本金</td>
                <td class=input>
                    <input type="text" class="common" name="registeredFunds" id="registeredFunds">
                </td>
                <td class=title>注册资本金币种</td>
                <td class=input>
                    <input type="text" class="codename" name="registeredFundsType" id="registeredFundsType" value="">
                </td>
            </tr>
        </table>
        <table class=common>
            <tr align="center">
                <td>
                    <input type="button" class="button" value="保 存" id="saveButton" name="saveButton"
                           onclick="return formToSave();">
                </td>
                <td>
                    <input type="button" class=button name="return" size="2" value="返 回"
                           onclick="window.opener=null;window.close();">
                </td>
            </tr>
        </table>
    </div>
</form>
<hr>
<form action="" name="queryForm">
    <table>
        <tr>
            <td class=listtitle colspan="4">组织机构信息查询</td>
        </tr>
        <tr></tr>
        <tr align="left">
            <td class=title>机构名称</td>
            <td class=input>
                <label for="UnitName"></label><input type="text" id="UnitName">
            </td>
            <td class=title>机构代码</td>
            <td class=input>
                <input type="text" id="UnitCard">
            </td>
        </tr>
        <tr align="center">
            <td colspan=4 class=button align="center">
                <input class="button" type="button" name="query" alt=" 查 询 " value="查 询"
                       onclick="return submitQueryForUnit()">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

<script language="javascript">
    function formToSave() {
        var data1 = document.fm.customerName.value;
        var data2 = document.fm.registeredFunds.value;
        var address = document.fm.address.value;
        console.log(data1);
        console.log(data2);
        console.log(address);

        window.opener.document.getElementsByName("customerName")[0].value = data1;
        window.opener.document.getElementsByName("registeredFunds")[0].value = data2;
        window.opener.document.getElementById("address").value = address;
        window.close()
    }

    function submitQueryForUnit() {
        var name = document.getElementById("UnitName").value;
        var card = document.getElementById("UnitCard").value;
        var strURL = "/untitled1_war_exploded/window/third.jsp?&name=" + name + "&card=" + card;
        if (trim(name) === "" && trim(card) === "") {
            alert("请选择机构名称或机构代码!至少有1项为必录项，请检查!");
            return false;
        }
        window.open(strURL, "信息子查询", "top=40,left=100,status=no,toolbar=no,menubar=no,resizable=1,location=0,directories=0,scrollbars=yes,width=1400,Height=700");
    }
</script>
<script src="${pageContext.request.contextPath}/js/common.js" charset="UTF-8"></script>

third.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>第三页</title>
</head>
<body>
<form name=fm action="" method=post>
    <table id="commonTable" class=common cellpadding="3" cellspacing="1">
        <tr>
            <td class=centertitle width='6%'>名称</td>
            <td class=centertitle width='6%'>行业名称</td>
            <td class=centertitle width='6%'>地址</td>
            <td class=centertitle width='6%'>经营范围</td>
            <td class=centertitle width='6%'>注册资本金</td>
            <td class=centertitle width='6%'>币种</td>
        </tr>
        <%
            for (int i = 0; i < 10; i++) {
        %>
        <tr name="a" class="classes"
            onmouseover="stay(this,'over')"
            onmouseout="stay(this,'out')"
            onclick="stay(this,'on')"
            ondblclick="backfillsuper(this);">
            <td><%="名称"+(1+i)%>
            <td><%="参数2"%>
            <td><%="参数3"%>
            <td><%="参数4"%>
            <td><%="参数5"%>
            <td><%="参数6"%>
        </tr>
        <%
            }
        %>
    </table>
</form>
</body>
</html>
<script language="javascript">
    function stay(thisRow, flag) {
        if (flag === 'over') {
            if (thisRow.style.backgroundColor !== '#cfff00') {
                thisRow.style.backgroundColor = '#cfffce';
            }
        } else if (flag === 'out') {
            if (thisRow.style.backgroundColor !== '#cfff00') {
                thisRow.style.backgroundColor = '';
            }
        } else {
            thisRow.style.backgroundColor = '#cfff00';
        }
        return false;
    }

    function backfillsuper(field) {
        window.opener.document.getElementsByName("customerName")[0].value = field.getElementsByTagName("td")[0].innerHTML.trim();
        window.opener.document.getElementsByName("industryName")[0].value = field.getElementsByTagName("td")[1].innerHTML.trim();
        window.opener.document.getElementById("address").value = field.getElementsByTagName("td")[2].innerHTML.trim();
        window.opener.document.getElementById("businessScope").value = field.getElementsByTagName("td")[3].innerHTML.trim();
        window.opener.document.getElementById("registeredFunds").value = field.getElementsByTagName("td")[4].innerHTML.trim();
        window.opener.document.getElementById("registeredFundsType").value = field.getElementsByTagName("td")[5].innerHTML.trim();
        window.close();
    }
</script>

common.js

/**
 * 去除字符串两端空白
 * @param value
 * @returns {*}
 */
function trim(value) {
    return leftTrim(rightTrim(value));
}

function leftTrim(value) {
    var re = /^\s*/;
    if (value == null) {
        return null;
    }
    return value.replace(re, "");
}

function rightTrim(value) {
    var re = /\s*$/;
    if (value == null) {
        return null;
    }
    return value.replace(re, "");
}

/**
 * 选择弹窗
 */
function show_confirm() {
    var result = confirm('是否删除！');
    if (result) {
        alert('删除成功！');
    } else {
        alert('不删除！');
    }
}

/**
 * 通过输入框判断
 */
function show_prompt() {
    var value = prompt('请输入姓名：', '默认名字');
    if (value == null) {
        alert('你取消了输入！');
    } else if (value === '') {
        alert('姓名输入为空，请重新输入！');
        show_prompt();
    } else {
        alert('你好，' + value);
    }
}

/**
 * 将多个输入框覆盖到当前页面
 */
function disp_prompt() {
    for (var i = 0; i < 5; i++) {
        var msg = prompt("请依次输入5个参数");
        var msgArray = msg.split(" ");
        document.write(msgArray + "</br>");
    }
}
Larry·D·Tu
关注
jsp 如何 返回数据库数据供前端访问 /简单的jsp接口如何编写 /jsp如何链接数据库
小青年 爱交流 爱分享
04-09 1156
首先你得新建一个jsp 页面 然后准备好你的 mysql 信息 String url="jdbc:mysql://localhost:3306/demo"; String user="root"; String password="1234"; 接下来，我们使用常规得 jdbc 连接数据库并且获取数据； java.lang.Class.forName("com.mysql.cj.jdbc.Driver"); Connection conn = Driver...
JSP文件流
qqding240的专栏
11-08 737
try{  String tempfile=(String)session.getId();  File f1=new File("F:/jsp/upload",tempfile);  FileOutputStream o=new FileOutputStream(f1);  InputStream in=request.getInputStream();  byte b[]=new byte[1
jsp怎么在表单跳转的时候携带参数_狂神说SpringMVC04：数据处理及跳转
weixin_39630466的博客
11-20 492
狂神说SpringMVC系列连载课程，通俗易懂，基于Spring5版本(视频同步)，欢迎各位狂粉转发关注学习。未经作者授权，禁止转载在上一节中，我们了解了控制器和Restful风格操作狂神说SpringMVC03：RestFul和控制器现在我们来看看SpringMVC参数接收处理和结果跳转处理吧！结果跳转方式ModelAndView设置ModelAndView对象 , 根据view的名称...
用JSP写的一个返回测试数据的服务器
天。朝程序猿的专栏
06-21 1280
主要是为了日后复习和巩固 版本履历 2012年12月05日发布. DummyAPI 0.02版 追加功能 增加返回内容编码格式的设定增加数据文件默认的返回类型为纯文本形式 预定追加功能 正则规则匹配功能的追加 2012年12月04日发布. DummyAPI 0.01版 版本功能 通过规则的指定，返回相应的数据(xml或者json).支持on
jsp页面之间的跳转和返回
lzx8023的专栏
05-29 535
1、点击按钮跳转到新的页面 [code="java"] 查询渠道信息 [/code] 2、js调用跳转接口 [code="java"] //查询某地区下的渠道 function searchAreaChannel(area_code) { window.location.href = "areaChannelList.do?area_code="+area_code; ...
自己写的jsp简单登录页面 myeclips
07-29
【标题】"自己写的jsp简单登录页面 myeclipse" 涉及的知识点主要集中在JavaServer Pages (JSP)技术和MyEclipse集成开发环境中。JSP是Java平台上的动态网页技术，而MyEclipse则是一个功能强大的Java EE集成开发环境，...
JSP开发模型
qq_55680321的博客
01-06 406
SP 一、JSP Model1 1.传统的Jsp Model 1模型 Jsp是独立的，自主完成所有的任务. 2.改进的Jsp Model 1模型 Jsp页面与JavaBeans共同协作完成任务 Model 1模式的实现比较简单，适用于快速开发小规模项目。但从工程化的角度看，它的局限性非常明显：JSP页面身兼View和Controller两种角色，将控制逻辑和表现逻辑混杂在一起，从而导致代码的重用性非常低，增加了应用的扩展性和维护的难度。 早期有大量ASP和JSP技术开发出来的Web应用，这些Web应用都
ProjectTest（页面跳转，定时服务器文件下载）
08-04
在SpringMVC中，有两种主要的页面跳转方式：视图解析器（View Resolver）和模型AndView对象（ModelAndView）。视图解析器通过返回视图名来实现跳转，如"forward:/success"表示将请求转发到success.jsp。而...
ajax怎么将数据传到另外一个页面,用js把数据从一个页面传到另一个页面
weixin_31716637的博客
08-05 6232
用js把数据从一个页面传到另一个页面的层里?如果是传到新页面的话，你网站基于什么语言开发直接用get或者post获取，然后输出到这个层通过url传参如果是HTML页面的话JS传到新页面就window.location.href='a.html?id=100';然后a.html页面的JS就document.getElementById("s").innerHTML=window.location.s...
JSP中taglib指令详解：模型-表示分离与组件化
POST方式更安全，但数据不会显示在URL中，适用于大量数据传输。 在创建JSP页面时，注释是不可或缺的一部分。JSP注释用于在服务器端隐藏信息，仅供开发者查看，而HTML注释则是普通用户可以看到的，通常用于页面布局...
jsp中Ext的“布局”和“表单提交”“回填”教程（1）
05-29
NULL 博文链接：https://weklyd.iteye.com/blog/1044942
一个jsp跳转到另一个jsp怎么带数据呢？如下所示：
Jenny_xuexi的博客
11-20 2079
实现从demo4.jsp带数据<username,admin>到shopList.jsp中，通过request。getParameter（“username”）进行获取到了。这就是从一个jsp到另外一个jsp如何带数据故去，以后就可以这样用了。 demo4.jsp: <%@ page language="java" contentType="text/html; charset=...
JSP页面之间数据传递，JSP页面跳转
随笔_博客
08-18 9649
一、页面间传递数据 1、使用URL重写 （1）写数据：利用URL地址，在地址里面包含指定信息，可以包含jsp信息；读数据：利用JSP的request对象 <a href="delete.jsp?id=<%=s.getVsid()%>"> 删除</a> ##########################跨页面 int id =...
二〇二三-三-九——JSP页面跳转
最新发布
BEHEMOOTH的博客
03-09 85
第二十五天
页面回填数据
A_SD911的博客
03-08 816
回填数据主要是查询，然后将查询的数据直接赋值到显示的控件之中。 首先写好要回填到的模板，例： 然后到数据库写好要查询的语句，例： 先在数据库里面测试一下异常，这样就可以不用到时候出错了都不知道。 在数据库写完查询了就到页面赋值，一定要每个要赋值的控件都写好名字，不然赋值不了。 在页面赋值的代码是： 例如赋值回填后的效果是： ...
回填数据
小熊学习基地
12-03 1185
  回填数据就是把你查出来的数据返回给显示的文本框。但是这个在struts里就很简单。要用到struts标签。  假如我现在做一个更新的页面。就在一个JSP页面显示了所有图书信息。ID 图书名 作者名，后面有个更新。当我点击更新的时候 跳回另一个JSP页面。但是这个JSP页面要有你刚才点的那条数据的信息。当然在JSP页面要用到Struts标签。 查处来的数据是一个实体对
jsp中弹出窗口显示下拉框，将下拉框的值传入到另外一个页面
qq_25145753的博客
07-19 8146
功能需求：在jsp首页上是有3个查询条件，其中一个查询条件需要弹出窗口来选择值，然后将值写入到首页的文本框内。首先，首页如下图： 点击整车编码超链接，弹出窗口。如下图： 点击选中按钮，将值传到首页的整车编码文本框内。如下图： 这个地方重点在于怎么将弹出框的值传入到首页的文本框内。以下为点击选中按钮。执行的函数代码：function getZcbm(){ var
jsp连接数据库并将数据显示到页面表格中
热门推荐
weixin_48657573的博客
07-06 1万+
首先创建数据库表：webbook 然后插入自己想要插入的数据，接下来编写jsp代码： <%@ page language="java" import="java.sql.Connection" contentType="text/html; charset=UTF-8" pageEncoding="GB18030"%> <%@ page import="java.sql.*" %> <!DOCTYPE html> <html> <head&gt
JSP数据交互（一）---内置对象》response
qq_60281421的博客
05-07 892
JSP内置对象之response： response对象用于响应客户请求并向客户端输出信息（设置响应参数等） 页面重定向： void sendRedirect（String location） 客户端将重新发送请求到指定的URL 实现登陆验证，并验证成功后跳转至欢迎页面 input.jsp： <body> <form action="controller.jsp" method="post"> <table> ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值