ProtoType框架的使用

ProtoType框架的使用

(2008-10-13 15:37:18)
标签:

ajax

div

undefined

ids

name

分类: JavaScript

//当有调用<script language src="prototype.js"></script>时在protoType框架中才会有用(prototype.js开发笔记)

//prototype.js是一个javascript的一段代码编写成的框架,网上有下载(http://www.prototypejs.org/api/ajax/request)
$() 方法是在DOM中使用过于频繁的 document.getElementByIdx() 方法
多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象

//document.getElementByIdx('').value一样的功能。
$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值,如文本框或下拉框。

//使用Request()的用
function search()
{
 var url="newPage.axps";
 new Ajax.Request(
  url,{method:'get',parameters:"ID=222&name=chen",onComplete:showResponse}
 );
}
url:是要执行跳转的页面。 method:跳转的方法(post,get两种)。
parameters:传递的参数。 onComplete:执行完成后执行的事件。onLoading:在加载时的事件。
onLoaded:加载页面后的事件。 Interactive:交互时的事件。onFailure:在失败后的事件。
onSuccess:加载成功后的事件。
function showResponse(Req)
{
 alert('OnComplete is even;');
 $('result').value=Req.responseText; 
}
<input type="text" id="result"/>
----------------------------------------Updater的使用和一些参数-----------------------------------------------
通过这个JS类库,将很容易的应用AJAX技术
ajax.updater应用
new Ajax.Updater('id',"url",{options});
id:你要更新的目标id
url:你要执行的操作,也可以是cgi
options:
属性 类型 默认 描述
method Array 'post' HTTP 请求方式。
parameters String '' 在HTTP请求中传入的url格式的值列表。
asynchronous Boolean true 指定是否做异步 AJAX 请求。
postBody String undefined 在HTTP POST的情况下,传入请求体中的内容。
requestHeaders Array undefined 和请求一起被传入的HTTP头部列表, 这个列表必须含有偶数个项目,任何奇数项目是自定义的头部的名称,接下来的偶数项目使这个头部项目的字符串值。 例子:['my-header1', 'this is the value', 'my-other-header', 'another value']
onXXXXXXXX Function(XMLHttpRequest) undefined 在AJAX请求中,当相应的事件/状态形成的时候调用的自定义方法。 例如 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 这个方法将被传入一个参数,这个参数是携带AJAX操作的 XMLHttpRequest对象。
onSuccess Function(XMLHttpRequest) undefined 当AJAX请求成功完成的时候调用的自定义方法。 这个方法将被传入一个参数, 这个参数是携带AJAX操作的 XMLHttpRequest对象。
onFailure Function(XMLHttpRequest) undefined 当AJAX请求完成但出现错误的时候调用的自定义方法。 这个方法将被传入一个参数, 这个参数是携带AJAX操作的 XMLHttpRequest对象。
insertion Function(Object, String) null 为了把返回的文本注入到一个元素中而执行的方法。这个方法将被传入两个参数,要被更新的对象并且只应用于 Ajax.Updater的响应文本 。
evalScripts Boolean undefined, false 决定当响应到达的时候是否执行其中的脚本块,只在 Ajax.Updater 对象中应用。 即要用到目标对象的JS代码必须设定true。
decay Number undefined,1 决定当最后一次响应和前一次响应相同时在 Ajax.PeriodicalUpdater 对象中的减漫访问的次数,例如,如果设为2,后来的刷新和之前的结果一样, 这个对象将等待2个设定的时间间隔进行下一次刷新,如果又一次一样, 那么将等待4次,等等。不设定这个只,或者设置为1,将避免访问频率变慢。
parameters:Form.serialize(formObj);会把表单的数据提交到后台去。
-----------------------------------------------------------------------------------------------------------------
new Ajax.Updater("datalist", url, {method:'post',onComplete:function(request){$('cs_title').hide();location.href=location.href;},asynchronous:true, evalScripts:true, parameters:Form.serialize(formObj) });
parameters:Form.serialize(formObj):是传本页面上的参数到后台如:<input type="text" name="cards.info"/>
------------------------------------new Ajax.Request的运用--------------------------------------------------
<html>
My View contents for Home/Index
<body>
//加载了prototype.js框架类
<script src="file:///D:/cheng/Aptana/TextAdjx/prototype.js"></script>
<script language="javascript">
function searchDiv()
{
 //alert('responseText');
 $('result').innerText="Load...";
 var url = 'newPage.page';
 var pars = 'ids=' + 111;
 var myAjax = new Ajax.Request(
     url,{method: 'post', parameters: pars, onComplete: showResult},asynchronous:false
  ); 
 //asynchronous:false:指定是否是同步的
 //evalScripts:true:是否执行脚本代码。
 //执行完就直接加载数据到<div id='result'></div>层中
 //parameters:{two:222},参数还可以这样添加。
 //new Ajax.Updater('result',url,{method:'post',parameters:pars});
 //parameters:Form.serialize(this):提交表单的信息到另一页面上,可以把<input type="text" name="txt1"/>等的值一并传到另一方法内接收。
}
//originalRequest:参数如同Ajax中的XMLHttpRequest一样
function showResult(originalRequest)
{
 //$('result').innerText=originalRequest.responseText;
 //innerText会显示newPage整个页面
 //innerHTML会显示文本内容
 $('result').innerHTML=originalRequest.responseText;
 alert('responseText');
}
</script>
<input type="button" value="Requset" onclick="searchDiv();"/>
<div id='result'></div>
</body>
</html>
-------------------------------------------------------------------------------------------------------
new Ajax.Updater('divTip', url, {method:'get', onComplete: function(){document.getElementByIdx('divTip').className = "";}});
==================controls/HomeControl类中================
public void NewPage(int ids)
{
 IList its=new ArrayList();
 its.Add(ids);its.Add("newPage");
 this.ProperyBag.Add("its",its);
 
 //当有RenderText就无须要建VM页面就会有返回的值 
 this.RenderText("aaaaaa"+ids);
}
=================================Home/newPage.vm页面上=====================================
//在Castle框架中是用页面的数据来加载数据,用前台的脚本来接收的
#foreach($it in $its)
 $it
#end
------------------------------提交表单的用法-----------------------------------------------------------
<form method="post" onsubmit="new Ajax.Updater('pos', 'AddPosition.page', {method:'post', parameters:Form.serialize(this), onComplete:function(request){ $('editposition').hide(); } }); return false;">
  <span id="postitle">请输入添加职位的名称</span>
  <a href="javascript:void(0);" onclick="$('editposition').hide();">x</a>
  <input type="hidden" name="id" value="$!{positionId}"/>
  <input type="hidden" name="listType" value="List"/>
  部门名称<input type="text" id="positionName" name="positionName" value="$!{position.PositionName}"/>
  <input type="submit" value="保存"/>
  <input type="button" value="关闭" onclick="$('editposition').hide();"/>
 </form>

-----------------------用prototype.js的方法来隐藏和显示层------------------------------------------------------
//show(),hide():是prototype.js提供的方法所特有的
<head>
 <style type="text/css">
 #relaWindow{
 position: relative; top:-15px; left:256px;
}
.windows{ position:absolute;
 border: 1px solid #FF5F1F;
 background: #fff;
 width: 300px;
 w/idth: 270px;
 padding: 10px 15px 20px 15px;
}
#relaWindow .windows h3{
 font-size: 14px;
 color: #FF5F1F;
}
#relaWindow .windows h3 a:link,#relaWindow .windows h3 a:visited,#relaWindow .windows h3 a:hover{
 text-decoration: none;
 float: right;
 color: #FF5F1F;
}
.windows .inp{
 width: 204px;
 height: 21px;
 w/idth: 200px;
 he/ight: 17px;
 border: 1px solid #D7D7D7;
 padding: 2px 0 0 2px;
}
#relaWindow .windows .butt{
 height: 18px;
 background: #FFE7DD;
 border: 1px solid #FF5F1F;
 color: #FF5F1F;
}
 </style>
 </head>
//有样式层不会引响另外的层
 <body>
  <a href="javascript:void(0);" onclick="HideDiv();">层的出现</a>
  <div id="relaWindow"> 
  <div id="cs_title" class="windows" style="display:none">
   <h1>消费备注<a href="javascript:void(0);" onclick="HideRemark();">×</a></h1>
   <div id="RemarkContent"></div>
   <div class="btn"><input type="button" value="关闭" onclick="HideRemark();"/></div>
  </div>
  </div>
  <div>#######################################################################</div>
  <script language=JavaScript src="prototype.js"></script>
  <script language="JavaScript">
   function HideDiv()
   {
    //传统的用法
    //document.getElementByIdx('cs_title').style.display='block';
    $('cs_title').show();
   }
   function HideRemark()
   {
    //document.getElementByIdx('cs_title').style.display='none';
    $('cs_title').hide();
   }
  </script>
 </body>
--------------------------------------------------------------------------------------------------------------
<div id='divMsg'></div>
//with取得层并对其属性进行操作,方便不用多次重用该层即可。
with($('divMsg')){
 innerHTML='请输入姓名!!';
 className='aa';
}
-----------------------------------------------------------------
<input type="button" id="btn1" value="disabled" onclick="disable1();"/>
function disable1()
{
 $('btn1').disabled=true
}
------------------------------------each用来迭代循环用的-------------------------------------------------------
function each()
{
 var simpsons=['Homeer','Marge','Lisa','Bart','Meg'];
 //如同用for一样的循环(familyMember是自己定义的随便取名即可。)。
 simpsons.each(function(familyMember){ alert(familyMember); });
}
-----------------------------------$R()-------------------------------------------------------
function deomDollar_R()
{
 //$R(lowerBound,upperBound,excludeBounds);结果会显示10-13之间的数:10,11,12,excludeBounds是否包含upperBound这个数
 var range=$(10,13,false);
 //value:会显示数值。index:会显示循环的次数(从0开始)。
 range.each(function(value,index){alert(value);});
}
-------------------------------关于Ajax.Request与Ajax.Updater的区别-------------------------------
关于protetype.js中的Ajax.Request与Ajax.Updater的区别,个人理解Ajax.Request适用于对返回数据要进行比较复杂的处理的情况;Ajax.Update则适用于用返回的数据更新当前页中的某个Html元素的内容。
例子如:csm/Sale/editReturn.page页面
//提交表单,用AJAX来提交。
 function actionFrom(ele)
 {
  if(vaildateEditReturn(ele))
  {
   var url = "SaveReturn.page?rnd=" + Math.random();
   new Ajax.Updater('divReturn',url, {method:'post',asynchronous:true, evalScripts:true, parameters:Form.serialize(ele)});
   //new Ajax.Request(url, {method:'post',asynchronous:true, evalScripts:true, parameters:Form.serialize(ele)});
   //两个的提交是不一样的。Updater是可以提交,并在后台的会有脚本的提示出来。
   //Request是不无法提交的。要注意!!!!!!
  }
  return false;
 }
++++++++相应的方法。
  public void SaveReturn(int salereturnId,int[] orderId,int[] productId,int[] oldquantity, int[] quantity)
  {
   string operater = Operater;
   if (productId.Length != quantity.Length || productId.Length != orderId.Length)
   {
    ClientAlertAndCloseRefresh("产品数量匹配不足!");
    return;
   }
   //判断是否还可以退货
   for (int i = 0; i < productId.Length; i++)
   {
    ProductSaleReturn psr = ProductReturnService.GetProductSaleReturn(orderId[i],productId[i]);
    if(psr!=null && psr.SaleQuantity-psr.ReturnedQuantity+oldquantity[i]-quantity[i]<=0)
    { 
     //会在页面上显示出一个对话框,但没有刷新页面
     ClientAlert(string.Format("第{0}行的产品数量不能大于{1}!",i+1,psr.SaleQuantity-psr.ReturnedQuantity+oldquantity[i]));
     return;
    }
   }
   SaleReturn salereturn;
   if (salereturnId > 0) //编辑
   {
    salereturn = SaleReturnService.Get(salereturnId);
   }
   else //新增
   {
    salereturn = new SaleReturn();
    salereturn.ReturnDate = System.DateTime.Now;
    salereturn.OwnerId = merchantName;
    salereturn.ReturnState = ReturnState.Open;
    salereturn.Operater = operater;
    salereturn.OwnerName = LoginName;
   }
   BindObjectInstance(salereturn, ParamStore.Form, "salereturn");
   
   IList productReturn = new ArrayList();
   
   for (int i = 0; i < productId.Length; i++)
   {
    ProductReturn preturn = new ProductReturn();
    SaleOrder saleOrder = _saleorderService.Get(orderId[i]);
    preturn.Product = new Product();
    ProductSale productSale = _productSaleService.GetProductSale(orderId[i],productId[i]);
    
    preturn.Return = salereturn;
    preturn.OrderId = orderId[i];
    preturn.Product.Id = productId[i];     
    preturn.CreateDate = System.DateTime.Now;     
    preturn.Quantity = quantity[i];
    preturn.UnitPrice = productSale.UnitPrice;
    preturn.Amount = preturn.UnitPrice * quantity[i];
    preturn.Discount = productSale.Discount;
    preturn.OrderDiscount = saleOrder.Discount;     
    preturn.Operater = operater;    

    productReturn.Add(preturn);
   }   

   //保存退货单和退货单细项
   int res = _saleReturnService.Save(salereturn,productReturn);
   if(res>0)
   {   
    //也是会弹出对话框,也是没有刷新到页面。 
    ClientAlertAndCloseRefresh(salereturnId>0?"产品退货单修改成功!":"产品退货单添加成功!");
   }
   else
   {
    ClientAlert(salereturnId>0?"产品退货单修改失败!":"产品退货单添加失败!");
   }
  }
--------------------------------------------------------------------------------------------------------------
new Ajax.Request();提交是不会刷新页面的。
//如例子
http://biz.myking.cn/Cards/MerchantMember/CardLogConsume.page?cardId=6888102008162928&type=&dateFrom=2008-09-23&dateTo=2008-9-25&shopId=
的查看备注并保存的确
function SaveRemark(form, index){
  new Ajax.Request('SaveFillRemark.page?rd=' + Math.random(), {method:'post', parameters:Form.serialize(form), onComplete:function(request){alert('保存成功!');$('Remark'+index).hide();}});
  return false;
 }

http://biz.myking.cn/cards/Customer/editCustomerInfo.page?customerId=648350&width=624&height=574页面上
创建分组会自动无刷新就把新的分组名放到客户分组中。
function showCategoryModule(){
 new Ajax.Updater('addDiv', 'editCategory.page', {onLoading:function(request) { showWaiting(); } , onComplete:function(request) { hideWaiting();$('addDiv').show()} ,asynchronous:true, evalScripts:true});
}
----------------------------------------------------------------------------------------------
//Event.observe();为对象加上事件,参数为(对象名,响应事件,函数名);
//例子是。kingcard/diffSale/editCouponPackages.vm
var newCoupon = document.createElement('li');
Event.observe(newCoupon, "click",selectLi);
fucntion selectLi(){}

---------------------------------------------------------------------------------------------


//$('').select();取得指定的对象的。document.getElementsByTagName_r();
function checkForm(frm)
 {
  //frm.submit();
  var sels =$('form1').select('[type="select"]');
  alert(sels.length);
 }
----------------------------------------------------------------------------
//serizlize();方法是用来取得表单的参数,并生成一串参数如:merchantname=chen&merchantID=112
//<form id="testForm"><input type="text" name="merchantname"/></form>
alert($('testForm').serialize());

没有更多推荐了,返回首页