Ajax不刷新页面实现后台传值

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tsoTeo/article/details/77855063

在这个图书购物车系统中,当我们进入有各种图书的界面时。
我们要实现
通过点击[加入购物车]按钮把自己想要的图书放进购物车而又不刷新当前的界面的功能。
这时候,我们要获取要加入购物车的图书的唯一的标识(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");

后面就是 数据库操作了。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页