电子商务网站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;
  }
 } 
.............................................................................................................................