電子商務網站JSONRPC應用實例

<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;
  }
 } 
.............................................................................................................................

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章