您的位置：首页 > 其它

使用ajax来实现数据的添加删除查询并能操作表格

2012-03-12 00:00 417 查看 
<%@ 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();
}
}

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航