prototype与json

tianmingqi
浏览: 118596 次
性别:
来自: 河南郑州
最近访客更多访客>>

s475671405
anotherwriter
c779120057
qualenac
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

prototype json CSS JavaScript Ajax
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script language="javascript" type="text/javascript"  src="javascripts/prototype.js"></script>
	<script language="javascript" type="text/javascript"  src="javascripts/window.js"></script>
	<script language="javascript" type="text/javascript"  src="javascripts/effects.js"></script>
	
	<link href="css/themes/default.css" rel="stylesheet" type="text/css" />
  	<link href="css/themes/spread.css" rel="stylesheet" type="text/css" />
  	<link href="css/themes/alert.css" rel="stylesheet" type="text/css" />
  	<link href="css/themes/alert_lite.css" rel="stylesheet" type="text/css" />
  	<link href="css/themes/alphacube.css" rel="stylesheet" type="text/css" />
  	<link href="css/themes/debug.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div id="login" style="display:none">
  <p><span id='login_error_msg' class="login_error" style="display:none"> </span></p>
  <div style="clear:both"></div>
  <p><span class="login_label">交纳资费金额：</span> <span class="login_input"><input type="text" name="name" size="10" />（元）</span></p>
  <div style="clear:both"></div>
  <p><span class="login_label">服务终止时间：</span> <span class="login_input"><input type="text" name="pass" size="20"/>（如2008-8-8）</span></p>
  <div style="clear:both"></div>
</div>


<!-- ------------------------------e ------------------------- -->

<table width="800" border="0" align="center">
  <tr>
    <td><b>单位名称</b></td>
    <td><b>注册时间</b></td>
    <td><b>会员类型</b></td>
    <td ><b>操作</b></td>
  </tr>
  <tr id="3">
    <td><div>豪杰科技</div></td>
    <td><div>2006-5-8</div></td>
    <td><div>普通单位</div></td>
    <td>
    	<button  id="delete" value="3" >删除</button>
    	<button  id="vip" value="3" >设为VIP</button>
    	<button  id="huiyuan" value="3" >设为会员</button>
    	<button  id="normal" value="3" style="display:none">设为普通</button>
    </td>
  </tr>
  
    <tr id="4">
    <td><div>豪杰科技</div></td>
    <td><div>2006-5-8</div></td>
    <td><div>VIP单位</div></td>
    <td>
    	<button  id="delete" value="4">删除</button>
    	<button  id="vip" value="4" style="display:none">设为VIP</button>
    	<button  id="huiyuan" value="4" >设为会员</button>
    	<button  id="normal" value="4" >设为普通</button>
    </td>
  </tr>
  <tr>
  </tr>
</table>

<!--  注册事件  -->
<script type="text/javascript">
		//当页面加载完毕后调用事件注册函数
		Event.observe(window, 'load',function(){
			//为所有的按钮注册事件
			$$('button').each(function(item){
				var type = item.readAttribute('id');
				if(type == 'delete'){//如果是删除按钮事件
					item.observe('click', doDelete);
				}else if(type == 'vip'){//如果是vip按钮事件
					item.observe('click', doVIP);
				}else if(type == 'huiyuan'){//如果是普通会员按钮
					item.observe('click', doHuiyuan);
				}else if(type == 'normal'){
					item.observe('click', doNormal);
				}
			});									  
		});
</script>

<!-- ---------------------提升为会员 ------------------------- -->
<script type="text/javascript">
function doHuiyuan(event){
	var element = Event.element(event);
	Dialog.confirm($('login').innerHTML,
						 {className:"alphacube", width:400, 
                                      okLabel: "确定", cancelLabel: "取消",
                                      onOk:function(win){
											startHuiyuanAjax(element);
											return true;	
									   }
						}
	);
}
//开始ajax
function startHuiyuanAjax(element){
	new Ajax.Request('JSONExample.action',
    {     method:'get',
    	 //requestHeaders: {Accept: 'application/json'}, 
   		 parameters: {id: element.readAttribute('value'),name: $F('name'), pass: $F('pass')},
         onSuccess: function(transport){
		        var response = transport.responseText.evalJSON(true); 
		        var flag=   response.login;
		        if(flag){
		        	var tds=$(element.readAttribute('value')).childElements();
		        	var td3=tds.first().next(1);
		        	var divs3=td3.childElements().first();
		        	divs3.replace('<div>会员单位</div>');
		        	 
		        	element.previous(0).show(); 
		        	element.next(0).show();
		        	element.hide();
		        	alert("OK , 操作成功！");
		        }else{
		        	alert("操作失败！");
		        }
		},
	     onFailure: function(){ 
		 		alert('可能后台出现了错误...'); 
		}
    });
}
</script>

<!-- -----------------------提升为VIP-------------------------------- -->

<script type="text/javascript">

function doVIP(event){
	var element = Event.element(event);
	Dialog.confirm($('login').innerHTML,
						 {className:"alphacube", width:400, 
                                      okLabel: "确定", cancelLabel: "取消",
                                      onOk:function(win){
											startVIPAjax(element);
											return true;	
									   }
						}
	);
}
//开始ajax
function startVIPAjax(element){
	
	new Ajax.Request('JSONExample2.action',
    {     method:'get',
    	 //requestHeaders: {Accept: 'application/json'}, 
   		 parameters: {id: element.readAttribute('value'),name: $F('name'), pass: $F('pass')},
         onSuccess: function(transport){
		        var response = transport.responseText.evalJSON(true); 
		        var flag=response.login;
		        if(flag){
		        	var tds=$(element.readAttribute('value')).childElements();
		        	var td3=tds.first().next(1);
		        	var divs3=td3.childElements().first();
		        	divs3.replace('<div>VIP单位</div>');
		        	
		        	//alert(element.readAttribute('id'));
		        	element.next(0).show();
		        	element.next(1).show();
		        	element.hide();
		        	alert("OK , 操作成功！");
		        }else{
		        	alert("操作失败！");
		        }
		},
	     onFailure: function(){ 
		 		alert('可能后台出现了错误...');
		}
    });
}
</script>

<!--  -------------------降级为普通会员---------------------------  -->

<script type="text/javascript">

function doNormal(event){
	if(! confirm("将会降低客户的服务范围，确定这样做吗？")){return ;}//提示
	var element = Event.element(event);
	
	
	new Ajax.Request('JSONExample2.action',
    {     method:'get',
    	 //requestHeaders: {Accept: 'application/json'}, 
   		 parameters: {id: element.readAttribute('value')},
   		 
         onSuccess: function(transport){
		        var response = transport.responseText.evalJSON(true); 
		        var flag=response.login;
		        if(flag){
		        	var tds=$(element.readAttribute('value')).childElements();
		        	var td3=tds.first().next(1);
		        	var divs3=td3.childElements().first();
		        	divs3.replace('<div>普通单位</div>');
		        	
		        	//alert(element.readAttribute('id'));
		        	element.previous(0).show();
		        	element.previous(1).show();
		        	element.hide();
		        	
		        	
		        	alert("OK , 操作成功！");
		        }else{
		        	alert("操作失败！");
		        }
		},
	     onFailure: function(){ 
		 		alert('可能后台出现了错误...');
		}
    });
}
</script>


<!-- ------------------删除操作------------------------- -->
	<script type="text/javascript">
		var timeout;
		var theNode2;
		function doDelete(event) {
			if(! confirm("删除将不可恢复，确定要删除吗？")){return ;}//提示
			theNode2=Event.element(event);
			timeout=1;//设置为等待1秒
			Dialog.info("正在删除..." + timeout + "秒",
               {width:110, height:40, showProgress: true});

			setTimeout(infoTimeout, 1000)
		}
		
		function infoTimeout() {
			timeout--;
			if (timeout >=0) {
			Dialog.setInfoMessage("正在删除..." + timeout + "秒");
			setTimeout(infoTimeout, 1000);
			}else{
  				Dialog.closeInfo();
  				$(theNode2.readAttribute('value')).remove();
  				alert('操作成功！');
			}
		}
	</script>
</body>
</html>
分享到：