一天一点做项目（4）

来源：互联网发布：sherwood算法编辑：程序博客网时间：2024/05/17 19:17

第八步：完成页面的设计

由于应用很简单，此处使用一个jsp即可，由于使用了jquery所以还引入了一个jquery1.3.js,另外还有自己编写的operate.js

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

<div align="center"><h2>简易仓库管理：</h2><br/>

请输入您想要提取获取的数量:<input type="text" id="count" />(最大数量:<%

Object obj=application.getAttribute("simpleinformation");

int[] tem=null;

if(obj!=null){

tem=(int[])obj;

out.print(tem.length);

}else{

out.print(0);

}

%>)<br/>

</div>

</body>

</html>

第九步：编写javascript

Operate.js

function getProduct(){

$.ajax({

type:"POST",

url:"ProductsSerivet",

data:"count="+$("#count").val(),

dataType:"xml",

success: function(xml){

var content="<table width=/"526/" border=/"1/"><tr><td width=/"243/" align=/"center/">序号</td><td width=/"243/" align=/"center/">产品名称</td><td width=/"273/">检查结果请在不合格工具上打√</td></tr>";

var index=1;

$(xml).find("product").each(function(){

var productId=$(this).children("productId").text();

var productName=$(this).children("productName").text();

var isAvaliable=$(this).children("isAvaliable").text();

content+="<tr><td align=/"center/">"+(index++)+"</td><td align=/"center/">"+productName+"</td><td align=/"center/"><input type=/"checkbox/" id=/""+productId+"/" class=/"checked/" />"+isAvaliable+"</td></tr>"

});

content+="<tr><td colspan=/"3/" align=/"center/"><input type=/"button/" value=/"提交/" onclick=/"check()/"/></td></tr></table>";

$("#showProducts").html(content);

$("#showResult").html("");

}

});

}

function check(){

var unavaliableProducts=$(".checked");

var parameters="";

unavaliableProducts.each(function(){

if($(this).attr("checked")==true){

parameters+="uPID="+$(this).attr("id")+"&";

}

});

//注意：参数最后多了一个&号，以下判断是消除该&号，但实际测试中失败，原因不明

//if(parameters!=""){

//parameters.substring(0,parameters.length-1);

//}

//接下来的测试却可以。

//var abs="12345";

//alert(abs.substring(0, 4));

$.ajax({

type:"POST",

url:"CheckSerivet",

data:parameters,

dataType:"html",

success: function(data){

$("#showResult").html(data);

}

});

}

第十步：部署应用，（其实在开发过程中就已经逐渐部署完了，在这里我把它们合并给出）

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.4"

xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<servlet-name>ProductsSerivet</servlet-name>

<servlet-class>com.jackyan.practice.store.servlet.ProductsServlet</servlet-class>

</servlet>

<servlet-name>CheckSerivet</servlet-name>

<servlet-class>com.jackyan.practice.store.servlet.CheckSerivet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>ProductsSerivet</servlet-name>

<url-pattern>/ProductsSerivet</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>CheckSerivet</servlet-name>

<url-pattern>/CheckSerivet</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

<listener-class>com.jackyan.practice.store.listener.StoreContextListener</listener-class>

</listener>

</web-app>

最终的测试运行！