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