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