index.jsp
上传用户:shjgzm
上传日期:2017-08-31
资源大小:2757k
文件大小:4k
源码类别:

Ajax

开发平台:

Java

  1. <%@ page contentType="text/html; charset=UTF-8"%>
  2. <%@ page language="java"%>
  3. <%@ page import="java.sql.*,ajax.db.DBUtils"%>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  5. <html>
  6. <head>
  7. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  8. <title>购物车</title>
  9. <style type="text/css">
  10. /* 页面字体样式 */
  11. body, td, input {
  12.     font-family:Arial;
  13.     font-size:12px;
  14. }
  15. /* 表格基本样式 */
  16. table.default {
  17.     border-collapse:collapse;
  18.     width:500px;
  19. }
  20. /* 表格单元格样式 */
  21. table.default td {
  22.     border:1px solid black;
  23.     padding:3px;
  24.     height:27px;
  25. }
  26. /* 列头样式 */
  27. table.default td.item {
  28.     background:#006699;
  29.     color:#fff;
  30.     text-align:center;
  31. }
  32. /* 购物车div样式 */
  33. #shoppingcart {
  34.     margin-top:20px;
  35. }
  36. </style>
  37. <script type="text/javascript">
  38. var xmlHttp;    //用于保存XMLHttpRequest对象的全局变量
  39. //用于创建XMLHttpRequest对象
  40. function createXmlHttp() {
  41.     //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
  42.     if (window.XMLHttpRequest) {
  43.        xmlHttp = new XMLHttpRequest();                  //FireFox、Opera等浏览器支持的创建方式
  44.     } else {
  45.        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
  46.     }
  47. }
  48. //刷新购物车
  49. function refreshCart() {
  50.     sendRequest("");
  51. }
  52. //向购物车添加产品
  53. function addProduct(pid) {
  54.     sendRequest("&action=add&pid=" + pid);
  55. }
  56. //清空购物车
  57. function emptyCart() {
  58.     sendRequest("&action=empty");
  59. }
  60. //删除购物车内单件产品
  61. function delProduct(pid) {
  62.     sendRequest("&action=del&pid=" + pid);
  63. }
  64. //向服务器发送操作请求
  65. function sendRequest(params) {
  66.     createXmlHttp();                        //创建XmlHttpRequest对象
  67.     xmlHttp.onreadystatechange = showCartInfo;
  68.     xmlHttp.open("GET", "cart.jsp?timestamp=" + new Date().getTime() + params, true);
  69.     xmlHttp.send(null);
  70. }
  71. //将服务器响应信息写入购物车div中
  72. function showCartInfo() {
  73.     if (xmlHttp.readyState == 4) {
  74.         document.getElementById("shoppingcart").innerHTML = xmlHttp.responseText;
  75.     }
  76. }
  77. </script>
  78. </head>
  79. <body onload="refreshCart()">
  80. <h1>购物车</h1>
  81. <table class="default">
  82. <tr>
  83.     <td class="item" width="35%">产品名称</td>
  84.     <td class="item" width="20%">价格</td>
  85.     <td class="item" width="45%">放入购物车</td>
  86. </tr>
  87. <%
  88.     String sql = "select pid, pname, price from products";   //定义查询数据库的SQL语句
  89.     Connection conn = null;                 //声明Connection对象
  90.     PreparedStatement pstmt = null;         //声明PreparedStatement对象
  91.     ResultSet rs = null;                    //声明ResultSet对象
  92.     try {
  93.         conn = DBUtils.getConnection();     //获取数据库连接
  94.         pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
  95.         rs = pstmt.executeQuery();          //执行查询,返回结果集
  96.         while (rs.next()) {                 //遍历结果集,显示产品信息
  97.             %>
  98.             <tr>
  99.                 <td><%=rs.getString("pname")%></td>
  100.                 <td align="center"><%=rs.getDouble("price")%> 元</td>
  101.                 <td align="center"><input type="button" value="加入购物车" onclick="addProduct('<%=rs.getString("pid")%>')"></td>
  102.             </tr>
  103.             <%
  104.         }
  105.     } catch (SQLException e) {
  106.         System.out.println(e.toString());
  107.     } finally {
  108.         DBUtils.close(rs);                  //关闭结果集
  109.         DBUtils.close(pstmt);               //关闭PreparedStatement
  110.         DBUtils.close(conn);                //关闭连接
  111.     }
  112. %>
  113. </table>
  114. <!-- 购物车信息 -->
  115. <div id="shoppingcart">
  116. </div>
  117. </body>
  118. </html>