第八步：完成页面的设计
由于应用很简单，此处使用一个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>
<title>仓库管理</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery1.3.js"></script>
<script type="text/javascript" src="js/operate.js"></script>
</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/>
<input type="button" value="提交" onclick="getProduct()"/>
</div>
<div align="center" id="showProducts" ></div>
<div align="center" id="showResult" ></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=/"提交/" οnclick=/"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>
<servlet-name>ProductsSerivet</servlet-name>
<servlet-class>com.jackyan.practice.store.servlet.ProductsServlet</servlet-class>
</servlet>
<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>
<listener-class>com.jackyan.practice.store.listener.StoreContextListener</listener-class>
</listener>
</web-app>
最终的测试运行！
扫一扫
5877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
