利用JSP与JS实现简易购物车

最新推荐文章于 2024-04-18 09:43:47 发布

七进制

最新推荐文章于 2024-04-18 09:43:47 发布

阅读量1w

点赞数 4

分类专栏： JSP 文章标签： jsp javascript 购物车-java

本文链接：https://blog.csdn.net/qq_36812187/article/details/78857931

版权

JSP 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

自己编写的一个简易购物网站示例：
这里写图片描述

示例代码运行的结果：

购物车简易示例

carts.jsp文件

<%@ page contentType="text/html;charset=GBK" %>
<%@ page import="java.util.*,java.sql.*" %>
<%      
    Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
    String spath="login.mdb";   //需要访问的数据库地址
    String dbpath=application.getRealPath(spath);
    String dbuser="";
    String dbpw="";
    String url="jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ="+dbpath;
    Connection conn=DriverManager.getConnection(url,dbuser,dbpw);
    Statement stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);

    String sql;     //定义存储数据库语句的变量
    ResultSet rs;   //定义存储查询结果的变量

    request.setCharacterEncoding("GBK");        //设置请求的编码
    String user=request.getParameter("user");   //从请求中得到用户名
%>
<html>
<head>
    <title>联邦商城</title>
    <meta http-equiv="Content-Type" content="text/html;charset=GBK" />
</head>
<body>
    <h1 id="user" value="<%=user%>">用户：<%=user%></h1>
    <h2>购物车</h2>
    <table id="carts"><!--如果想要点击各个按钮后有反应，需要利用javascript对按钮点击事件进行监听，再利用jQuery动态生成表单并提交-->
        <input class="btn btn-default" type="button" value="清空"/>
        <input class="btn btn-default" type="button" value="结算"/>
        <tr><th>商品名</th><th>价格</th><th>数量</th>
        <%
            try{
                sql="select carts.Cname,carts.Count,commodities.Price from carts,commodities where carts.Cname=commodities.Cname and  User='"+user+"'"; //设置数据库查询语句
                rs=stmt.executeQuery(sql);  //在数据库中执行sql语句
                String Cname="";    //定义商品名称
                int Price=0;        //定义商品价格
                int Count=0;        //定义商品数量

                if(rs!=null)        //判断sql语句是否执行成功
                {
                    while(rs.next())    //循环遍历查询结果
                    {
                        Cname=rs.getString("Cname");//从结果中得到商品名称
                        Price=rs.getInt("Price");//从结果中得到商品价格
                        Count=rs.getInt("Count");//从结果中得到商品数量
                        %>
                        <tr >
                            <td>
                                <%=Cname%>
                            </td>
                            <td>
                                <%=Price%>
                            </td>
                            <td>
                                <%=Count%>
                            </td>
                            <td>
                                <input type="button" name="<%=Cname%>" value="删除">
                            </td>
                        </tr>
                        <%
                    }
                }else {
                    out.println("获取商品数据失败！");
                }
            }catch(Exception e)
            {
                out.print("操作数据库失败！");
                out.println(e.getMessage());
            }
        %>
</form>
</body>
<script src='js/jquery-3.2.1.min.js'></script>
<script src='js/carts.js'></script>
</html>
<%
stmt.close();
conn.close();   //关闭数据库连接
%>

carts.js文件

    function addFormCarts(e){
    if(e.target.tagName=="INPUT")
    {
        //创建表单
        form = $("<form></form>");
        form.attr('method','post');
        //创建传输user的元素
        input0= $("<input type='text'/>");
        input0.attr('value',elUser.getAttribute('value'));
        input0.attr('name',"user");

        if(e.target.getAttribute('value')=="删除")
        {
            //创建传输商品名的元素
            input = $("<input type='text'/>");
            input.attr('value',e.target.name);
            input.attr('name',"Cname");

            form.attr('action','delete.jsp');//设置提交到的页面
            form.append(input);
        }
        else if(e.target.getAttribute('value')=="结算")
        {
            form.attr('action','pay.jsp');//设置提交到的页面
        }else
        {
            form.attr('action','deleteAll.jsp');//设置提交到的页面
        }
        form.append(input0);
        form.appendTo("body");
        form.css('display','none');
        form.submit();      //提交表单
    }
}


var elUser=document.getElementById('user');
var elCarts = document.getElementById('carts');

elCarts.addEventListener('click', addFormCarts, false);

ACCESS中的carts表结构：

七进制

关注

4
点赞
踩
37

收藏

觉得还不错? 一键收藏
2
评论
利用JSP与JS实现简易购物车

自己编写的一个简易购物网站示例：示例代码运行的结果：carts.jsp文件<%@ page contentType="text/html;charset=GBK" %><%@ page import="java.util.*,java.sql.*" %><% Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); String
复制链接

扫一扫