<INPUT id="qKey" name="qKey" value="商品關鍵字" onClick="this.value=''">.可以解決文本框中“商品關鍵字”在鼠標點擊文本框時,文本框的內容爲空。
/////////////////////////////////////////////////
商品搜索的一般實現:
<TD height="50" align="right" valign="bottom">
<IMG src="images/icon_login.gif" align="absmiddle">
<INPUT id="qKey" name="qKey" value="商品關鍵字" onClick="this.value=''">
<select id="category">
<option value="0">所有商品</option>
<logic:present name="cateList">
<logic:iterate id="cate" name="cateList" type="com.ORM.Category">
<option value="${cate.id}">${cate.cateName}</option>
</logic:iterate>
</logic:present>
</select>
<A href="javascript:QuickSearch()"><IMG src="images/icon_search.gif" align="absmiddle" border="0"></A>
</TD>
、、、、、、、、、、、、、、、、、、、、、、、、、
<script type="text/javascript">
//會員註冊
function reg(){
window.location = "reg.jsp";
}
//搜索商品
function QuickSearch(){
var url = "mer.do?method=searchMer&cateid="+document.all.category.value;
var key = document.all.qKey.value;
if (key !=null && key!="商品關鍵字" && key.length>0)url = url+"&key="+key;
window.location = url;
}
</script>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
jsonrpc的應用:
在web.xml
中添加 <!--JSONRPC 組件-->
<servlet>
<servlet-name>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-name>
<servlet-class>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-name>
<url-pattern>/JSON-RPC</url-pattern>
。。。。。。。。。。。。。。。。。。。。。。。。。
首先在頁頭添加:<jsp:useBean id="JSONRPCBridge" scope="session" class="com.metaparadigm.jsonrpc.JSONRPCBridge"/>
<jsp:useBean id="ajax" class="com.base.AjaxBean"></jsp:useBean>
<%
JSONRPCBridge.registerObject("ajax",ajax);
%>
其中ajax包含方法:/**取得商品分類列表getCategory()*//**取得會員級別getMemberLevel()*//**註冊登錄帳號有效性驗證chkLoginName(String)*//**修改選購商品數量modiCart(int, int)*//**調整會員級別updateLevel(Integer, Integer)*/
其次:<SELECT id="category" name="category">
<option value="0">所有商品</option>
</SELECT>
在這裏面怎麼添加商品的類別,也就是說,怎麼取出數據庫的中的商品類別添加到select裏面。
這裏就用到jsonrpc。
必須添加的代碼是:
<script type="text/javascript" src="JS/jsonrpc.js"></script>
、、、、、、、、、、、、、、、、、、、、、、、、、
然後:添加javascript代碼:
<script language="javascript">
//構造商品分類下拉列表
jsonrpc = new JSONRpcClient("JSON-RPC");
var result = jsonrpc.ajax.getCategory();
for (var i=0;i<result.length;i++){
option =document.createElement("OPTION");
option.value = result[i][0];
option.text = result[i][1];
document.all.category.options.add(option);
}
其中:jsonrpc.ajax.getCategory()就是調用JavaBean中的方法》/**取得商品分類列表*/
public String[][] getCategory(){
String[][] options = null;
MerService service = new MerServiceImpl();
try{
List list = service.browseCategory();
Category cate = null;
int i = 0;
if (list!=null){
options = new String[list.size()][2];
Iterator it = list.iterator();
while(it.hasNext()){
cate = (Category)it.next();
options[i][0] =cate.getId().toString();
options[i][1] =cate.getCateName().trim();
i++;
}
}else{
options = new String[1][2];
options[0][0] ="0";
options[0][1] ="無商品分類";
}
}catch(Exception ex){
logger.info("在執行AjaxBean類中的getCategory方法時出錯:/n");
ex.printStackTrace();
}
return options;
}
..................................................
修改購物車中,商品的數量,自動修改總價格:
..................................................
顯示該商品的會員價格:
<td>¥<span id="price${row.selId}">${row.memprice}</span></td>
...........................................................................
顯示該種商品總價格:
<td>¥<span id="money${row.selId}">${row.money}</span></td>
.................................................................................
顯示商品數量:
<input type="text" class="textBox" onChange="modiNum(${row.selId},this.value)" value="${row.number}" size="4"/>
//////////////////////////////////////////////////
顯示所有商品的總價格:
<span id="totalMoney">${totalMoney}</span>
..................................................................................
下面是具體的實現:
..................................................................................
//修改選購數量
function modiNum(selid,newNum){
if (jsonrpc.ajax.modiCart(selid,newNum)){
var oldMoney = document.getElementById("money"+selid).innerText;
var newMoney = newNum*document.getElementById("price"+selid).innerText;
var diffMoney = newMoney - oldMoney;
var newTotal = document.all.totalMoney.innerText*1+diffMoney;
document.getElementById("money"+selid).innerText = Math.round(newMoney*100)/100;
document.all.totalMoney.innerText = Math.round(newTotal*100)/100;
alert("<bean:message key="cart.modi.suc"/>");
}else{
alert("<bean:message key="cart.modi.fail"/>");
}
....................................................................................
檢測輸入的是否是數字,像輸入的要轉向頁數等。
去第<input type="text" id="willGoPage" name="willGoPage" class="control" size="2" onKeyPress="return isNumber()">
頁<input type="button" class="button" id="go" value="GO" name="go" onClick="goPage()">
...........................................................................................................................
//是否輸入數字
function isNumber(){
return ((event.keyCode>47)&&(event.keyCode<58));
}
//響應“GO”按鈕
function goPage(goPageNo){
var maxPageNo = <%=totalPages%>;
var goPageNo = document.all.willGoPage.value;
var url = "<%=action%>pageNo="+goPageNo;
if (goPageNo<1 || goPageNo>maxPageNo || goPageNo==''){
alert("對不起,您輸入的頁號無效,請您覈對後重新輸入!");
return ;
}else
{
window.location = url;
}
}
.............................................................................................................................