JSP通过遍历数组获取复选框的值

本文介绍了一种使用JSP技术实现复选框值获取的方法。通过定义一个字符串数组来表示复选框的选项,并在提交表单后读取所选的值。此示例展示了如何在JSP页面中动态生成复选框并处理用户输入。


JSP通过遍历数组获取复选框的值

首页代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
  <body>
  <%
String bookType[]={"科技图书","教育图书","文学图书","医学图书","法律图书"};
int number=bookType.length;
%>
   	<div align="center">
获取复选框的值
  <form name="form" method="post" action="dealwith.jsp" onSubmit="return checkEmpty(form)">
    <table width="276">
      <tr>
        <td width="266">请选择您爱看的书籍种类:</td>
      </tr>
      <%
      for(int i=0;i<bookType.length;i++){
      %>
      <tr>
        <td><input type="checkbox" name="name<%=i%>" value="<%=bookType[i]%>">
        <%=bookType[i]%></td>
      </tr>
	<%}%>

    </table>
     <input type="hidden" name="number" value="<%=bookType.length%>">
    <input type="submit" name="Submit" value="提交">
  </form>
</div>
  </body>
</html>

结果页代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title></title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
    <%
request.setCharacterEncoding("utf-8");
int number=Integer.parseInt(request.getParameter("number"));
%>
<div align="center">
获取复选框的值
<br>

    <table width="211" border="0">
    <tr>
        <td width="226">您选择为:</td>
      </tr>


<%
for(int i=0;i<number;i++){
  String name="name"+i;
  if(request.getParameter(name)!=null){
%>
      <tr>
        <td width="226"><div align="center"><%=request.getParameter(name)%></div></td>
      </tr>
 <%}}%>
</table><br>
<a href="index.jsp">返回</a></div>
  </body>
</html>

JSP获取复选框并通过 AJAX 传入后台,可按以下方式实现。 #### 前端 JSP 页面 在 JSP 页面中,需要获取复选框,并将其通过 AJAX 发送到后台。以下是一个示例代码: ```jsp <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSP 复选框 AJAX 示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript"> function sendCheckboxValues() { var checkboxValues = []; $('input[type="checkbox"]:checked').each(function() { checkboxValues.push($(this).val()); }); $.ajax({ type: "POST", url: "your_backend_url", data: { checkboxData: checkboxValues }, traditional: true, // 确保数组正确传递 dataType: "json", success: function(result) { alert("数据已成功发送到后台:" + result); }, error: function() { alert("发送数据时现错误"); } }); } </script> </head> <body> <input type="checkbox" name="option" value="option1"> 项 1 <input type="checkbox" name="option" value="option2"> 项 2 <input type="checkbox" name="option" value="option3"> 项 3 <input type="button" value="提交" onclick="sendCheckboxValues()"> </body> </html> ``` 在上述代码中,首先使用 jQuery 择器 `$('input[type="checkbox"]:checked')` 获取所有被中的复选框,然后历这些复选框并将其存储在 `checkboxValues` 数组中。接着使用 `$.ajax` 方法将数组数据发送到后台。需要注意的是,设置 `traditional: true` 以确保数组正确传递,这与引用[2]中提到的内容一致。 #### 后台接收 不同的后台技术有不同的接收方式,以下以 Java 的 Servlet 为例: ```java import java.io.IOException; import java.util.Arrays; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/your_backend_url") public class CheckboxServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String[] checkboxData = request.getParameterValues("checkboxData"); if (checkboxData != null) { System.out.println("接收到的复选框:" + Arrays.toString(checkboxData)); response.getWriter().write("数据已成功接收"); } else { response.getWriter().write("未接收到数据"); } } } ``` 在这个 Servlet 中,使用 `request.getParameterValues("checkboxData")` 方法获取前端传递的复选框数组
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ThinkPet

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值