ajaxを使用して、データの追加削除クエリーを実装し、テーブルを操作できます.
9252 ワード
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.kaishengit.dao.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> </title>
<style type="text/css">
table{
border-collapse:collapse;
}
</style>
</head>
<body>
<table width="50%" border="1">
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody id="a">
<c:if test="${empty list}">
<tr>
<td colspan="3"> :)</td>
</tr>
</c:if>
<c:forEach items="${list }" var="pro">
<tr>
<td>${pro.id}</td>
<td>${pro.proName }</td>
<td>${pro.price }</td>
<td>${pro.onsale}</td>
<td><a href="javascript:void(0)" rel="${pro.id}" id="del" onclick="delrow(event)"> </a>
<a href="javascript:void(0)" rel="${pro.id}" id="look" onclick="lookrow(event)"> </a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<center> </center>
:<input type="text" name="id" id="id">
:<input type="text" name="proName" id="proName"><br>
:<input type="text" name="price" id="price">
<input type="button" value=" " id="addrow" onclick="sendAjax()">
<script type="text/javascript">
var xmlHttp;
/* XMLHttpRequest */
function createXMLHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
}
/* */
var id;
function lookrow(event){
createXMLHttpRequest();
var evt = event || window.event;
var element = evt.srcElement || evt.target;
id = element.rel;
xmlHttp.onreadystatechange = chakancallback;
xmlHttp.open("GET", "pro.jspx?task=update&id="+id, true);
xmlHttp.send();
}
function chakancallback(){
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var xml = xmlHttp.responseXML;
var date=xml.getElementsByTagName("date")[0].childNodes[0].nodeValue;
var price=xml.getElementsByTagName("price")[0].childNodes[0].nodeValue;
var name=xml.getElementsByTagName("proName")[0].childNodes[0].nodeValue;
var onsale=xml.getElementsByTagName("onsale")[0].childNodes[0].nodeValue;
document.getElementById("id").value=date;
document.getElementById("price").value=price;
document.getElementById("proName").value=name;
document.getElementById("onsale").value=onsale;
}
}
/* */
function delrow(event){
createXMLHttpRequest();
var evt = event || window.event;
var element = evt.srcElement || evt.target;
id = element.rel;
alert(id);
xmlHttp.onreadystatechange = delcallback;
xmlHttp.open("GET", "pro.jspx?task=del&id="+id, true);
xmlHttp.send();
}
function delcallback(){
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var id=document.getElementById(id);
document.getElementById("a").removeChild(id);
}
}
function sendAjax(){
createXMLHttpRequest();
var id = document.getElementById("id").value;
var proName = document.getElementById("proName").value;
var price = document.getElementById("price").value;
xmlHttp.open("POST", "pro.jspx?task=add", true);
xmlHttp.onreadystatechange = callback;
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("task=add&id="+id+"&proName="+proName+"&price="+price);
}
function callback() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var xml = xmlHttp.responseXML;
var tr=document.createElement("tr");
var tbody = document.getElementById("a");
var row = tbody.insertRow(tbody.rows.length);
row.insertCell(0);
row.cells[0].innerHTML = xml.getElementsByTagName("date")[0].childNodes[0].nodeValue;
row.insertCell(1);
row.cells[1].innerHTML = xml.getElementsByTagName("proName")[0].childNodes[0].nodeValue;
row.insertCell(2);
row.cells[2].innerHTML = xml.getElementsByTagName("price")[0].childNodes[0].nodeValue;
}else {
alert("Ajax Error1!");
}
}
}
}
}
</script>
</body>
</html>
package com.kaishengit.web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import com.kaishengit.dao.ProDao;
import com.kaishengit.entity.Product;
public class ProServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String task=request.getParameter("task");
if("list".equals(task)){
try {
findAll(request,response);
} catch (Exception e) {
e.printStackTrace();
}
}else if("add".equals(task)){
add(request,response);
}else if("del".equals(task)){
del(request,response);
}else if("update".equals(task)){
update(request,response);
}
}
private void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String id=request.getParameter("id");
ProDao dao=new ProDao();
Product p=dao.findById(id);
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
out.print("<list>");
out.print("<date>"+p.getId()+"</date>");
out.print("<proName>"+p.getProName()+"</proName>");
out.print("<price>"+p.getPrice()+"</price>");
out.print("</list>");
out.flush();
out.close();
}
private void del(HttpServletRequest request, HttpServletResponse response) {
String id=request.getParameter("id");
ProDao dao=new ProDao();
dao.del(id);
try {
request.getRequestDispatcher("show.jsp").forward(request, response);
} catch (ServletException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
private void add(HttpServletRequest request, HttpServletResponse response) throws IOException {
request.getMethod();
String id=request.getParameter("id");
String proName=request.getParameter("proName");
String price=request.getParameter("price");
Product d=new Product();
d.setId(id);
d.setPrice(price);
d.setProName(proName);
ProDao dao=new ProDao();
dao.save(d);
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out=response.getWriter();
out.print("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
out.print("<list>");
out.print("<date>"+id+"</date>");
out.print("<proName>"+proName+"</proName>");
out.print("<price>"+price+"</price>");
out.print("</list>");
out.flush();
out.close();
}
private void findAll(HttpServletRequest request,
HttpServletResponse response) throws Exception {
ProDao dao=new ProDao();
List<Product> list=dao.findAll();
request.setAttribute("list", list);
try {
request.getRequestDispatcher("show.jsp").forward(request, response);
} catch (ServletException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
}