Ajax不刷新页面实现后台传值
来源:互联网 发布:知乎永久禁言怎么解除 编辑:程序博客网 时间:2024/06/16 10:23
在这个图书购物车系统中,当我们进入有各种图书的界面时。
我们要实现
通过点击[加入购物车]按钮把自己想要的图书放进购物车而又不刷新当前的界面的功能。
这时候,我们要获取要加入购物车的图书的唯一的标识(PK主键或者图书的ISBN),通过Ajax传入后台,交由后台处理(添加到数据库的购物清单表)
.jsp
<body> <p class="p1"><%=session.getAttribute("memberName") %> ,你好。<p> <br /> <h3 style="text-align:center;color:#008000">购物车系统--图书列表</h3> <br /> <table id="myTable1" width="1000px" border="1px" > <tr> <th width="130px">图书名称</th> <th width="200px">ISBN</th> <th width="130px">作者</th> <th width="180px">出版社</th> <th width="70px">定价</th> <th width="70px">折扣</th> <th width="70px">折扣价</th> <th>购买</th> </tr> <c:forEach items="${bookList }" var="b"> <tr> <td>${b.bookName }</td> <td>${b.isbn }</td> <td>${b.author }</td> <td>${b.publisher }</td> <td>${b.bookPrice }</td> <td>${b.discount }</td> <td><fmt:formatNumber value="${b.bookPrice*b.discount}" pattern="#.00"/></td> <td><button style="width:100px;" onclick="getISBN(this)">加入购物车</button></td> </tr> </c:forEach> </table> <br/> <table id="myTable2" width="600px"> <tr> <td width="180px">共<span style="color:red" > ${totalRecodeCount }</span> 条记录</td> <td width="80px">第<span style="color:red" > ${curPage }</span> 页</td> <td width="80px">共<span style="color:red" > ${totalPage }</span> 页</td> <c:if test="${curPage == 1 }"> <td width="80px"><span style="color:gray">首页</span></td> <td width="80px"><span style="color:gray">上一页</span></td> </c:if> <c:if test="${curPage != 1 }"> <td width="80px"><a href="/ShoppingCartSys/BooksServlet?pageNo=1">首页</a></td> <td width="80px"><a href="/ShoppingCartSys/BooksServlet?pageNo=${curPage-1 }">上一页</a></td> </c:if> <c:if test ="${curPage == totalPage }"> <td width="80px"><span style="color:gray">下一页</span></td> <td width="80px"><span style="color:gray">尾页</span></td> </c:if> <c:if test ="${curPage != totalPage }"> <td width="80px"><a href="/ShoppingCartSys/BooksServlet?pageNo=${curPage+1 }">下一页</a></td> <td width="80px"><a href="/ShoppingCartSys/BooksServlet?pageNo=${totalPage }">尾页</a></td> </c:if> <td> <input type="button" value ="查看购物车" onclick="toBookList()" /> </td> </tr> </table>
效果
这里的每一个[加入购物车]按钮,都有一个onclick事件,调用getISBN(this)方法
<button style="width:100px;" onclick="getISBN(this)">加入购物车</button>
.js
var req2;function getISBN(curB) { //获取当前按钮是第几行 var curRow = curB.parentNode.parentNode.rowIndex; //获取表名 var tab = document.getElementById("myTable"); //获取当前行第2列里的值,也就是ISBN var text = tab.rows[curRow].cells[1].innerHTML; // 访问addBook.do这个servlet同时把获取的表单内容text加入url字符串,以便传递给addBook.do var url = "/ShoppingCartSys/addBook.do?isbn=" + text; alert("已成功添加到购物车"); // 创建一个XMLHttpRequest对象req if (window.XMLHttpRequest) { req2 = new XMLHttpRequest();// IE7, Firefox, Opera支持 } else if (window.ActiveXObject) { req2 = new ActiveXObject("Microsoft.XMLHTTP");// IE5,IE6支持 } req2.open("get", url, true); req2.onreadystatechange = callback; // send函数发送请求 req2.send(null);}function callback() { if (req2.readyState == 4 && req2.status == 200) { return "OK"; }}
通过发送url到指定servlet,由servlet获取处理。
var url = "/ShoppingCartSys/addBook.do?isbn=" + text;
这里的addBook.do实在web.xml文件中配置的映射路径。
<servlet> <servlet-name>AddBookServlet</servlet-name> <servlet-class>controller.AddBookServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AddBookServlet</servlet-name> <url-pattern>/addBook.do</url-pattern> </servlet-mapping>
由servlet获取传来的url中的isbn值。
String isbn = request.getParameter("isbn");
后面就是 数据库操作了。
阅读全文
0 0
- Ajax不刷新页面实现后台传值
- AJAX JQuery 调用后台方法返回值(不刷新页面)
- PHP + AJAX 实现无刷新分页 不刷新页面实现分页 PHP AJAX
- PHP + AJAX 实现无刷新分页 不刷新页面实现分页 PHP AJAX
- 用Ajax实现不刷新页面修改内容
- Ajax 实现页面局部刷新
- Ajax实现页面局部刷新
- 关于解决jquery用get实现ajax在ie里面刷新不进入后台的问题
- jquery ajax调用不刷新页面
- ajax页面不刷新的分页
- 【Jsp】Ajax提交数据不刷新页面
- php 做分页ajax页面不刷新
- js页面传值,不经后台
- 利用JQUERY AJAX上传文件。重点是实现不刷新页面
- AJAX实现不刷新页面点击按钮在目标位置加载目标内容
- 使用 jQuery+Ajax+MySQL+Servlet 实现不刷新页面数据更新
- form提交不刷新页面、不用AJAX 也能实现类似"异步更新"效果
- 用ajax提交数据到后台,并且把计算结果从后台把数据转到前台(该过程不刷新页面)
- CentOS 安装pip
- Java正则表达式非贪婪提取字符串中的每个数字
- 阿里云部署并启动tomcat遇到的坑
- 【转】正则匹配函数——regcomp和regexec
- 刷题六
- Ajax不刷新页面实现后台传值
- 安装和激活pycharm的实用方法(附多个下载链接)
- [校招面试题]Redis有几种数据结构,和其他数据库的区别
- LinkedList的源码分析
- js无缝轮播图
- D
- linux 进阶命令___0002
- 解题报告:Codeforces Round #432 (Div. 2) E.Arpa and a game with Mojtaba (博弈)
- 结构化面试题库