JavaWebhtml+js创建购物车表单以及连接数据库部分代码提⽰
因为⼤作业需要设置购物车，并能从⽤户所在数据库表中导出，所以找到了⼀个购物车模版，运⾏之后状态如下：
**
：
**
**
**
*{
font-size:14px;
font-family:"微软雅⿊";
vertical-align:middle;
margin:0;
padding:0;
}
img{
width:160px;
height:120px;
}
/*span{display:inline-block;}*/
.imfor_topdiv{
height:40px;
background-color:deepskyblue;
font-weight:bold;
}
.imfordiv{
height:140px;
line-height:120px;
}
.imfor:hover{
back好听id ground:RGB(238,246,255);
}
.check,
.check_top{
width:70px;
}
.pudc,
.pudc,
.pudc_top{
width:400px;
}
.pices,
.pices_top{
width:60px;
}
.totle{
color:red;
}
.num,
.num_top{
width:90px;
}
.numinp小王子书评 ut{
width:40px;
}
.numspan{
height:23px;
width:17px;
border:1pxsolid#e5e5e5;
background:#f0f0f0;
text-align:center;
line-height:23px;
color:#444;
cursor:pointer;
}
.totle,
.totle_top{
width:60px;
}
.del,
.del_top{
width:60px;
cursor:pointer;
}
.imfor_topdiv,
.imfordiv{
float:left;
border:1pxsoliddeepskyblue;
text-align:center;
}
.imfor_top,
.imfor{
width:800px;
}
.foot{
float:inherit;
}
#box,
#content_box{
width:800px;
margin:0auto;
}
.foot_add,
.foot_del{
float:left;
cursor:pointer;
margin-left:10px;
margin-top:1胃溃疡用药 4px;
}
.foot{
width:800px;
background-color:#eaeaea;
}
.foot_tol,
.foot_cash{
float:right;
cursor:pointer;
width:80px;
margin-top:14px;
margin-left:100px;
}
#susum{
color:red;
}
:
$(function(){
totl();
adddel()
//全选
$("#all").click(function(){
all=$(this).prop("checked")
$(".Each").each(function(){
$(this).prop("checked",a鱼鳔怎么做好吃 ll);
})
})
//删除当前⾏
$(".del").each(function(){
$(this).click(function(){
$(this).parent().remove();
if($(".imfor").length==0){
$("#susum").text(0);
}
totl();
})
})
//添加⼀⾏
$(".foot_add").click(function(){
varstr='
'
'
'
'
'
'
'
'
'
$(this).parent().prev().append(str);
totl();
adddel()
$(".del").each(function(){
$(this).click(function(){
$(this).parent().remove();
totl();
})
})
})
//全选删除
$(".foot_del").click(function(){
$(".Each").each(function(){
if($(this).prop('checked')){
$(this).parents(".imfor").remove();
totl();
if($(".imfor").length==0){
$("#susum").text(0);
}
}
})
})
})
//合计
functiontotl(){
varsum=0;
$(".totle").each(function(){
sum+=parFloat($(this).text());
$("#susum").text(sum);
})
}
functionadddel(){
//⼩计和加减
//加
$(".add").each(function(){
$(this).click(function(){
var$multi=生活活动 0;
varvall=$(this).prev().val();
vall++;
$(this).prev().val(vall);
$multi=parFloat(vall)*parFloat($(this).parent().prev().text());
$(this).parent().next().text(($multi));
totl();
})
})
//减
$(".reduc").each(function(){
$(this).click(function(){
var$multi1=0;
varvall1=$(this).next().val();
vall1--;
if(vall1<=0){
vall1=1;
}
$(this).next().val(vall1);
$multi1=parFloat(vall1)*parFloat($(this).parent().prev().text());
$(this).parent().next().text(($multi1));
totl();
})
})
}
上⾯三个是未调⽤数据库时的模版，需要运⽤jquery。
那么如何遍历输出上⾯这⼀段代码表现出数据库输出呢，在jsp界⾯连接数据库，查询数据库中的商品，如下⾯这段代码，将信息⾏插⼊到
while遍历中：
<%@pageimport=".*"%>
<%@pagecontentType="text/html;chart=UTF-8"language="java"%>
<%Stringno=ameter("flag");//从上⼀jsp获取的⽤户no，⽤来判断⽤户信息，以及取值
StringDRIVER_NAME="";
finalStringURL="jdbc:mysql://localhost:3306/ClothesM7";//url地址，
//可以在DriveandDataSource⾥⾯查看⾃⼰的数据库的地址
finalStringUSER_NAME="root";//数据库⽤户名
//密码
finalStringPASSWORD="Wzy768291";//我设置的连接数据库的密码
try{
//获取连接
e(DRIVER_NAME);
Connectionconn2=nection(URL,USER_NAME,PASSWORD);
Stringsql="lect*ngcarwhereuids='"+no+"'";
//ing(3,age);
Statementstmt=Statement();//创建PreparedStatement对象
ResultSetrs=eQuery(sql);
%>
<%
while(()){//当查询结果存在时，获取相关信息
Stringcid=ing(2);//获取服装id
Stringnumb=ing(3);
Stringdate=ing(4);
Stringsql2="lect*swherecid='"+cid+"'";//利⽤服装id获取更多服装信息
Statementstmt2=Statement();//创建Pr溥仪退位时间 eparedStatement对象
ResultSetrs2=eQuery(sql2);//获取查询结果，rs表⽰
while(()){//当服装信息存在时，遍历rs2，这⾥我遍历了两遍因为需要输出的东西在两张表⾥⾯，简单的化⼀遍即可
while(()){//当服装信息存在时，遍历rs2，这⾥我遍历了两遍因为需要输出的东西在两张表⾥⾯，简单的化⼀遍即可
Stringpath=ing(8);//通过clothes表格获取服装路径
Stringfilename=ing(7);//通过clothes表格获取服装照⽚⽂件名称
Stringname=ing(1);//通过clothes表格获取服装名称
Stringprice=ing(6);//通过clothes表格获取服装价格
finalfloati=loat(price)*loat(numb);
Stringtot=""+i;
//输出每⾏信息
%>
<%
}
}
%>
<%
();
();
}catch(ClassNotFoundExceptione){
tackTrace();
}catch(SQLExceptionthrowables){
tackTrace();
}
(no);
%>