Ajax不重新整理頁面實現後臺傳值
阿新 • • 發佈：2019-01-27
在這個圖書購物車系統中，當我們進入有各種圖書的介面時。
我們要實現
通過點選[加入購物車]按鈕把自己想要的圖書放進購物車而又不重新整理當前的介面的功能。
這時候，我們要獲取要加入購物車的圖書的唯一的標識（PK主鍵或者圖書的ISBN），通過Ajax傳入後臺，交由後臺處理（新增到資料庫的購物清單表）
.jsp
<body>
<p class="p1"><%=session.getAttribute("memberName") %> ，你好。<p>
<br />
<h3 style="text-align:center;color:#008000" 效果
這裡的每一個[加入購物車]按鈕，都有一個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");後面就是 資料庫操作了。