用JavaScript在jsp中生成各种标签（文本框、复选框、下拉列表）

最新推荐文章于 2024-02-19 09:59:58 发布

原创最新推荐文章于 2024-02-19 09:59:58 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jsp #javascript #html #action #function #class

javaScript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何利用JavaScript在JSP页面中动态生成下拉列表、复选框等HTML元素。通过示例代码展示从Action层获取数据并更新页面元素，涉及到AJAX请求、JSON响应以及Struts配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用JavaScript在jsp中生成各种标签（文本框、复选框、下拉列表），这里的例子是用Josn格式提交和返回值的。

一、代码正文：

功能一：生成下拉列表

1.1、目标JSP文件（Query.jsp）中的JavaScript代码：

1.2、目标JSP文件（Query.jsp）中的html代码：根据所选店铺id，去查询所属的仓库列表

<td class="bg" width="10%"> 店铺 </td> <td width="20%"> <select name="mallNo" id="mallNo" style="width:80%" onchange="getSellerStores()"> <option value="">==全部==</option> <s:action id="options" name="getUserMallList" namespace="/shop/config"/> <s:set name="requestMallNo" value="mallNo"/> <s:iterator value="#options.configs" status="li"> <option value="${mallNo}" <s:property value='#requestMallNo==mallNo?"selected":""'/> > ${mallName} </option> </s:iterator> </select> </td> <td class="bg" width="10%"> 仓库 </td> <td width="20%"> <div id="sellerStoreSelect"></div>

1.3、提交的Action后java文件中的处理方法：

OrderAction.java

/** * 获取某店铺的仓库 * @return */ public String sellerStoreAllList(){ ajaxResponse = new AjaxJSONResponse(); try{ List<SellerStore> list = new ArrayList(); list = sellerStoreManager.SellerStoreAllList(mallNo); ajaxResponse.setSuccess(true); ajaxResponse.setData(list); }catch(Exception e){ ajaxResponse.setSuccess(false); ajaxResponse.setMessage(ExceptionUtils.getRootMessage(e)); LOG.error("取信息失败：" + ajaxResponse.getMessage()); } return SUCCESS; }

1.4、Struts配置文件代码：

<action name="sellerStoreAllList" class="orderAction" method="sellerStoreAllList"> <result type="json"> <param name="root">ajaxResponse</param> </result> </action>

功能2：生成复选框

2.1、目标JSP文件（Query.jsp）中的JavaScript代码：

2.2、目标JSP文件（Query.jsp）中的html代码：

<tr> <td width="10%" class="bg" ><nobr>任务</nobr> </td> <td width="90%"> <s:action id="tableMaps" name="pushTaskMenu" namespace="/outbound/jsp" ignoreContextParams="true"/> <s:if test="#tableMaps.task.size>0"> <s:select name="taskId" id="taskId" headerKey="" headerValue="" list="#tableMaps.task" onchange="getTables()" listKey="id" listValue="title" value="taskId" cssClass="BigInput"/> </s:if> </td> </tr> <tr> <td class="bg" >自定义显示列</td> <td > <div id="colNameCheboxs"></div> <input type="hidden" id="columnNameStr" name="columnNameStr" /> </td> </tr>

2.3、提交的Action后java文件中的处理方法：

CommonItemAction.java

private List<String> columnNameList; public String getTables(){ ajaxResponse = new AjaxJSONResponse(); try{ String customerTableName = commonItemManager.getTaskById(taskId).getCustomerTableName(); columnNameList = commonItemManager.getColumnName(customerTableName); ajaxResponse.setSuccess(true); ajaxResponse.setData(columnNameList); //columnNameList.size() //custDisplayList =commonItemManager.getCustDisplay(taskId); }catch(Exception e){ ajaxResponse.setSuccess(false); ajaxResponse.setMessage(ExceptionUtils.getRootMessage(e)); LOG.error("取信息失败：" + ajaxResponse.getMessage()); } return SUCCESS; }

2.4、Struts配置文件代码：

<action name="getTables" class="obCommonItemAction" method="getTables"> <result type="json"> <param name="root">ajaxResponse</param> </result> </action>

二、附：

2.1、记得加入JSON的jar包：jsonplugin-0.32.jar

2.2、在你的目标jsp文件中包含进以下EXT支持：

在<head></head>中加入<jsp:include page="/common/ext2/ext-all.jsp" flush="true" />

2.3、ext-all.jsp文件中的内容为：

<%@ page contentType="text/html; charset=utf-8" %> <% request.setCharacterEncoding("utf-8"); String root = request.getContextPath(); %> <link rel="stylesheet" type="text/css" href="<%= root %>/common/ext2/resources/css/ext-all.css" /> <mce:script type="text/javascript" src="<%= root %></mce:script> <mce:script type="text/javascript" src="<%= root %></mce:script> <mce:script type="text/javascript"></mce:script>

其中common/ext2文件夹就是EXT2的支持啦。（记得加这个文件夹，这个文件夹可以到我的优快云里的资源下载处下载，名字如：EXT2 JOSN Jquery 时间控件，地址http://haotangyu.download.youkuaiyun.com/user/haotangyu/）

2.4、以下是AjaxJSONResponse .java文件（记得在jsp页面加EXT的jar包）

package com.skylink.common.webutil; public class AjaxJSONResponse { private boolean success = true; private String message; private Object data; //以下的get、set方法在此省略，用的时候记得加上 }