ajax前后台交互入门例子实现控制台打印结果
发布时间：2020-12-16 00:42:50 所属栏目：百科 来源：网络整理
导读：Mysql + jsp +javabean+ jquery +ajax+servlet实现的功能：控制台获取表格多选框选中的栏数 1. 在 mysql 中建表 orddetail 。如下： 2.建立相对应的 javabean( Orddetail .java). public class OrderDetail {private int id;private int Flag;private String
|
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)
在jsp页面中添加如下引用：
<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");*/
}
} （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |