MysqL + jsp +javabean+ jquery +ajax+servlet实现的功能:控制台获取表格多选框选中的栏数
1.在MysqL中建表orddetail。如下:
2.建立相对应的javabean(Orddetail.java).
public class OrderDetail { private int id; private int Flag; private String OrderId; private String Name; private String Address; public String getOrderId() { return OrderId; } public void setOrderId(String orderId) { OrderId = orderId; } public String getName() { return Name; } public void setName(String name) { Name = name; } public String getAddress() { return Address; } public void setAddress(String address) { Address = address; } public int getId() { return id; } public void setId(int id) { this.id = id; } public int getFlag() { return Flag; } public void setFlag(int flag) { Flag = flag; } }
3.写表单。
<body> <center> <h2>我的订单</h2> <form method="post" > <table width="90%" border="1" cellspacing="0" cellpadding="1"> <tr> <th><input type="checkBox" id="allid" onclick="doallcheck()"></th> <th>orderId</th> <th>name</th> <th>address</th> </tr> <% if(null != orderDetailList && orderDetailList.size() != 0) { for(OrderDetail orderDetail : orderDetailList) { %> <tr align="center"> <% if(orderDetail.getFlag() == 1) { %> <td><input type="checkBox" name="mycheckBox" onclick="doclickcheck(this)" checked="checked" value="<%=orderDetail.getId() %>"></td> <% } else if(orderDetail.getFlag() == 0) { %> <td><input type="checkBox" name="mycheckBox" onclick="doclickcheck(this)" value="<%=orderDetail.getId() %>"></td> <% } %> <td><%=orderDetail.getOrderId() %></td> <td><%=orderDetail.getName() %></td> <td><%=orderDetail.getAddress() %></td> </tr> <% } } %> <tr> <td colspan="5" align="right"> <input type="button" id="confirmbutton" value="confirm" /> </tr> </table> </form> </center> </body>
4.在jsp中写javascript片段。处理链接数据库及按钮单击事件。
<% Connection ct = null; PreparedStatement ps = null; //prepareStatement对象通常用来执行动态sql语句 ResultSet rs = null; //ResultSet对象表示select语句获得查询得到的记录集合结果集一般是一个记录表,其中包含多个记录行和列标题。 String DRIVER = "com.MysqL.jdbc.Driver"; //专为MysqL数据库而编写的驱动程序。驱动程序是实现了Driver接口的类 String URL = "jdbc:MysqL://localhost:3306/mydatabase"; //jdbc url 用来表示数据源,这样驱动程序可用它建立一个连接 String USERNAME = "root"; String PASSWD = "root"; List<OrderDetail> orderDetailList = new ArrayList<OrderDetail>(); try { //System.out.println("haha"); Class.forName(DRIVER); //装载并注册数据库的jdbc驱动程序 ct = DriverManager.getConnection(URL,USERNAME,PASSWD); //取得数据库连接 String sql = "select * from orddetail"; ps = ct.prepareStatement(sql); //预处理语句 。使用sql创建一个prepareStatement对象。 rs = ps.executeQuery();//执行预处理语句,必须调用无参数版本的方法。得到一个结果集对象 //记录行从一开始,一个Statement对象一个时刻只能打开一个ResultSet对象。如果需要对结果集的每行进行处理,需要移动结果集的游标。 //对于新产生的 ResultSet对象游标指向第一行的前面,可以调用ResultSet对象的next()方法,使游标定位到下一条记录。 while(rs.next()) { //ResultSet接口提供的检索行的字段值放啊,由于结果集列的不同。所以应使用不同getXxx()方法获得列值。 OrderDetail orderDetail = new OrderDetail(); orderDetail.setId(rs.getInt("id")); orderDetail.setOrderId(rs.getString("orderId")); orderDetail.setName(rs.getString("name")); orderDetail.setAddress(rs.getString("address")); orderDetail.setFlag(rs.getInt("flag")); orderDetailList.add(orderDetail); } } catch (Exception e) { e.printStackTrace(); } finally { } %> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <base target="_self"> <script type="text/javascript"> //全选 function doallcheck(){ var allche = document.getElementById("allid"); var che = document.getElementsByName("mycheckBox"); if(allche.checked == true){ for(var i=0;i<che.length;i++){ che[i].checked="checked"; } }else{ for(var i=0;i<che.length;i++){ che[i].checked=false; } } } //任选 function doclickcheck(obj) { if(obj.checked==false){ var allche = document.getElementById("allid"); allche.checked = false; } } </script>5.引入 jquery 片段。(test.js)
<script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="test.js"></script>test.js如下:
$(document).ready(function(){ _postData(); }); function _postData(){ $("#confirmbutton").click(function(){ var str =""; var checkvalue = $("input[name='mycheckBox']:checked"); for(var i = 0; i <checkvalue.length; i++){ str += checkvalue[i].value+','; } str = str.substring(0,str.length-1); $.post("task",{name:'['+str+']'},function(data){ alert( "Data Loaded: " + data); },"json" ); } ); }
6.编写servlet片段。(task.java)
public class task extends HttpServlet { @Override protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { String name = request.getParameter("name"); System.out.println("array:"+name); /*String result = " what "+name; request.setAttribute("result",result); System.out.println("ahhah"); response.sendRedirect("index.jsp"); //request.getRequestDispatcher("/index.jsp").forward(request,response); System.out.println("end");*/ } }