使用ajax來實現數據的添加刪除查詢並能操做表格

時間 2019-11-20

標籤使用 ajax 實現數據添加刪除查詢並能表格欄目 Ajax 简体版

原文原文鏈接

<%@ 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();
		}
	}
	
}