ProtoType框架的使用
ProtoType框架的使用
(2008-10-13 15:37:18)
转载
标签： ajaxdivundefinedidsname |
分类： JavaScript |
//当有调用时在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;
}
----------------------------------------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)：是传本页面上的参数到后台如：
------------------------------------new Ajax.Request的运用--------------------------------------------------
My View contents for Home/Index
//加载了prototype.js框架类
-------------------------------------------------------------------------------------------------------
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就无须要建ＶＭ页面就会有返回的值
this.RenderText("aaaaaa"+ids);
}
=================================Home/newPage.vm页面上=====================================
//在Castle框架中是用页面的数据来加载数据，用前台的脚本来接收的
#foreach($it in $its)
$it
#end
------------------------------提交表单的用法-----------------------------------------------------------
-----------------------用prototype.js的方法来隐藏和显示层------------------------------------------------------
//show(),hide()：是prototype.js提供的方法所特有的
//有样式层不会引响另外的层
层的出现
--------------------------------------------------------------------------------------------------------------
//with取得层并对其属性进行操作，方便不用多次重用该层即可。
with($('divMsg')){
innerHTML='请输入姓名！！';
className='aa';
}
-----------------------------------------------------------------
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
//
alert($('testForm').serialize());