第3章 Ajax ToolKit 的使用
使用ajax加载数据字典,生成select
使⽤ajax加载数据字典,⽣成select //使⽤ajax加载数据字典,⽣成select//参数1: 数据字典类型 (dict_type_code)//参数2: 将下啦选放⼊的标签id//参数3: ⽣成下拉选时,select标签的name属性值//参数4: 需要回显时,选中哪个optionfunction loadSelect(typecode,positionId,selectname,selectedId){//1 创建select对象,将name属性指定var $select = $("<select name="+selectname+" ></select>");//2 添加提⽰选项$select.append($("<option value='' >---请选择---</option>"));//3 使⽤jquery 的ajax ⽅法,访问后台Action$.post("${pageContext.request.contextPath}/BaseDictAction", { dict_type_code:typecode},function(data){//遍历//4 返回json数组对象,对其遍历$.each( data, function(i, json){// 每次遍历创建⼀个option对象var $option = $("<option value='"+json['dict_id']+"' >"+json["dict_item_name"]+"</option>");if(json['dict_id'] == selectedId){//判断是否需要回显 ,如果需要使其被选中$option.attr("selected","selected");}//并添加到select对象$select.append($option);});},"json");//5 将组装好的select对象放⼊页⾯指定位置$("#"+positionId).append($select);}function loadUserRoleSelect(typeUrl,positionId,selectname,sId,selectedId) {//创建selectvar $select = $("<select name="+selectname+" id="+sId+"></select>");$select.append($("<option value=''>---请选择---</option>"));$.ajax({"async":true,"type":"post","url":typeUrl,"success":function(data){$.each(data,function(i,json){var $option = $("<option value='"+json.id+"'>"+json.roleName+"</option>");$select.append($option);if(json['userRole'] == selectedId){//判断是否需要回显 ,如果需要使其被选中$option.attr("selected","selected");}})},"dataType":"json"});$("#"+positionId).append($select);}<script type="text/javascript">$(function() {loadUserRoleSelect("${pageContext.request.contextPath}/userRoleList.do","selectBd", "userRole","userRole","${erRole}");});</script>。
AjaxControlToolkit使用整理
AjaxToollit3.5使用整理1 AlwaysVisibleControl最前端显示滚动块 (2)2 AnimationExtender动画效果无 (2)3 AutoCompleteExtender文本框自动填写 (2)4 CalendarExtender日历 (3)5 CascadingDropDown级联控件扩展,如下拉列表 (3)6 CollapsiblePanelExtender 面板控件扩展隐藏或显现面板 (7)7 ConfirmButtonExtender确认弹出窗口 (7)8 ModalPopupExtender模态面板,原页面灰显 (7)9 DragPanelExtender 生成一个可拖动的Panel (8)10 DropDownExtender 使一个Label扩展为DropDownList (8)11 DropShadowExtender 使控件下生成阴影形成立体效果 (9)12 DynamicPopulateExtender 生成Html替换掉控件 (9)13 FilteredTextBoxExtender 输入文本过滤 (9)14 HoverMenuExtender 扩展GridView鼠标放上显示编辑,删除等菜单无 (9)15 ListSearchExtender List类控件扩展无 (9)16 MaskedEditExtender 输入控件格式设置扩展 (9)17 MaskedEditV alidator输入控件验证扩展,配合MaskedEditExtender使用 (10)18 MutuallyExc lusiveCheckBoxExtender 使用CheckBox实现RadioButtonList的功能 (11)19 NoBot 无 (11)20 NumericUpDownExtender 在文本框上添加向上向下小按钮来选择 (11)21 PagingBulletedListExtender 扩展BulletedList使其按指定条件筛选 (12)22 PasswordStrength 密码强度判断 (13)23 PopupControl 无 (14)24 Rating 五个代表等级的星星选择评分 (14)25 ReorderList 生成一个可以鼠标拖动排序的列表;无 (15)26 ResizableControl 生成一个可拖动改变大小的控件无 (15)27 RoundedCornersExtender 设置控件的边角弧度无 (15)28 SliderExtender 扩展TextBox形成一个滑块,可用鼠标拖动 (15)29 SlideShowExtender 扩展Image控件生成幻灯片效果 (15)30 TabPanel 形成Tab页效果,不多写了 (16)31 TextBoxWatermark 在填入前文本框内的提示,获得焦点后隐藏 (16)32 ToggleButtonExtender将CheckBox前的小圆点替换成其他图标无 (17)33 UpdatePanelAnimation 更新数据时的动画效果 (17)34 V alidatorCalloutExtender 验证控件扩展弹出提示框动画 (17)未注明则下列控件皆略去runat,ID等服务器控件通用必填属性1 AlwaysVisibleControl最前端显示滚动块使一个面板总在屏幕上;一般用于广告;控件必须包含如下属性:TargetControlID:要控制的控件ID;VerticalSide:垂直停靠位置,可选项Top,Bottom,Middle;VerticalOffset:控件垂直偏移值,正数字,表示偏移像素;HorizontalOffset:控件水平停靠位置,可选项Left,Right,Center;HorizontalOffset: 控件水平偏移值,正数字,表示偏移像素;ScrollEffectDuration:页面变动时移动到新位置所需时间,正数字,表示秒数;2 AnimationExtender动画效果无3 AutoCompleteExtender文本框自动填写根据用户输入字符串时自动提供备选项,项搜索引擎的查询条件输入框;控件必须包含如下属性:TargetControlID:要控制的控件ID;ServicePath:指定自动完成功能Web Service的路径如ServicePath="AutoCompleteService.asmx" ;ServiceMethod:指定自动完成功能Web Method的名称ServiceMethod="GetWordList";MinimumPrefixLength:开始提供自动完成列表的文本框内最少的输入字符数量;CompletionSetCount:是指列表列出输入提示即可选项的数量;需要如下格式的WebService支持:红色部分不可更改using System;using System.Collections.Generic;using System.Web.Services;[WebService(Namespace = "/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][System.Web.Script.Services.ScriptService]public class AutoComplete : WebService{public AutoComplete(){}[WebMethod]public string[] GetCompletionList(string prefixText, int count){if (count == 0){count = 10;}if (prefixText.Equals("xyz")){return new string[0];}Random random = new Random();List<string> items = new List<string>(count);for (int i = 0; i < count; i++){char c1 = (char) random.Next(65, 90);char c2 = (char) random.Next(97, 122);char c3 = (char) random.Next(97, 122);items.Add(prefixText + c1 + c2 + c3);}return items.ToArray();}4 CalendarExtender日历在文本框上绑定一个日历控件,使文本框获得焦点时弹出日历框;控件必须包含如下属性:TargetControlID:要控制的控件ID;可选属性:PopupButtonID:控制弹出和收回的控件;一般为一个带有日历图标的按钮;PopupPosition:日历弹出位置,相对目标控件偏移位置;Format:选中的日期格式,字符串如"yyyy-mm-dd";5 CascadingDropDown级联控件扩展,如下拉列表一般是在多个DropdownList控件绑定多个CascadingDropDown控件,按顺序必须选中第一个后第二个才可选并根据第一个控件的选中项加载可选项;控件必须包含如下属性:TargetControlID:要控制的控件ID;Category:目标控件的数据项,会显示在目标控件前作为标题,例如:“供电公司:”PromptText:控件默认显示项即第一项,一般为提示,例如:“选择一个供电公司”LoadingText:加载下级控件项时显示的提示文本,例如:“[正在加载…]”;ServicePath: 提供数据的WebService路径,例如:“CarsService.asmx”;ServiceMethod:提供数据的WebService方法,例如:“GetDropDownContents”;ParentControlID:父控件ID,首级控件可以不写;页面后台添加如下命名空间和方法:using System.Web.Services;using AjaxControlToolkit;//此方法内容不能更改[WebMethod][System.Web.Script.Services.ScriptMethod]public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category){return new CarsService().GetDropDownContents(knownCategoryValues, category);}所需WebService如下:using System;using System.Collections.Specialized;using System.Text.RegularExpressions;using System.Web;using System.Web.Services;using System.Xml;[WebService(Namespace = "/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][System.Web.Script.Services.ScriptService]public class CarsService : WebService{//为了简单描述功能,所以采用Xml数据源private static XmlDocument _document;private static Regex _inputValidationRegex;private static object _lock = new object();// 取得数据源;public static XmlDocument Document{get{lock (_lock){if (_document == null){// 从文件加载数据_document = new XmlDocument();_document.Load(HttpContext.Current.Server.MapPath("~/App_Data/CarsService.xml")); }}return _document;}}//列出数据层级,本例共三级如下:public static string[] Hierarchy{get { return new string[] { "make", "model","color" }; }}//输入有效性验证,非必须;public static Regex InputValidationRegex{get{lock (_lock){if (null == _inputValidationRegex){_inputValidationRegex = new Regex("^[0-9a-zA-Z \\(\\)]*$"); }}return _inputValidationRegex;}}///<summary>///级联控件扩展方法,签名和内容不可更改///</summary>[WebMethod]public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category){StringDictionary knownCategoryValuesDictionary =AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues) ;returnAjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category, InputValidationRegex);}}本例加载的xml如下:<?xml version="1.0"encoding="utf-8" ?><CarsService><make name="Acura"><model name="Integra"><color name="Green" /><color name="Sea Green" /><color name="Pale Green" /></model><model name="RL"><color name="Red" /><color name="Bright Red" /></model><model name="TL"><color name="Teal" /><color name="Dark Teal" /></model></make></CarsService>6 CollapsiblePanelExtender 面板控件扩展隐藏或显现面板点击某个区域浮动隐藏或显示一块面板控件必须包含如下属性:TargetControlID:要控制的控件ID;ExpandControlID:控制浮动面板的控件ID,即在该控件上点击显示面板;CollapseControlID:控制浮动面板的控件ID,即在该控件上点击隐藏面板;Collapsed:初始时是否显示面板,True为不显示;可选属性:ImageControlID:在展开和隐藏面板时变动的图标控件,一般为ImageControl,包含在TargetControl里或TargetControl本身就是TargetControl,在面板展开和隐藏时图案在ExpandedImage,CollapsedImage属性指定的图案变换;ExpandedImage:在面板展开时ImageControlID指定的控件显示的图片;CollapsedImage:在面板隐藏时ImageControlID指定的控件显示的图片;7 ConfirmButtonExtender确认弹出窗口弹出模态面板,相当于JS的Confirm弹出对话框,原页面灰显;配合DisplayModalPopupID使用控件必须包含如下属性:TargetControlID:要控制的控件ID;ConfirmText:弹出的对话框内容;可选属性:DisplayModalPopupID:控制弹出窗口的ModalPopupExtender的ID,联合使用可形成背景灰显效果;8 ModalPopupExtender模态面板,原页面灰显弹出模态面板,配合CSS可使原页面灰显,突出显示模态面板;模态面板以外的控件可点击但不触发事件,可配合使用BackgroundCssClass使背景灰显不可点击;控件必须包含如下属性:TargetControlID:要控制的控件ID;PopupControlID:弹出的面板的ID,一般为Panel的ID;OkControlID:返回OK的面板上的某个控件ID,点击该控件面板返回OK;CancelControlID:返回Canel的面板上的某个控件ID,点击该控件面板返回OK;可选属性:DropShadow:弹出面板是否有阴影;BackgroundCssClass:背景CssClass的类名,使原页面灰显的CssClass 定义如下:.background{background-color:Gray;filter:alpha(opacity=70);opacity:0.7;}9 DragPanelExtender 生成一个可拖动的Panel控件使一个Panel可被拖到页面的任意位置;控件必须包含如下属性:TargetControlID:要控制的可被拖动的控件的ID;DragHandleID:被当作拖动把手的控件ID,鼠标点击上面然后可拖动Panel;最好放到被拖动到Panel里面;在页面任意位置加入如下JS代码,否则Panel拖动后会弹回原来位置:<script type="text/javascript">function setBodyHeightToContentHeight() {document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px";}setBodyHeightToContentHeight();$addHandler(window, "resize", setBodyHeightToContentHeight);</script>注:虽然在面板外套上一个div然后指定float,width,height可以时面板不弹回,但不可靠;10 DropDownExtender 使一个Label扩展为DropDownList扩展Label使鼠标放上后形成下拉列表形式,选择一项后等于点击组成该列表项控件,激发该控件的注册事件;控件必须包含如下属性:TargetControlID:要控制的控件的ID;DropDownControlID:备选项的容器ID一般为一个Panel,里面包含多个控件,如LinkButton,Button11 DropShadowExtender 使控件下生成阴影形成立体效果扩展一个控件使控件下生成阴影形成立体效果;一般用于Panel;控件必须包括如下属性:TargetControlID:要控制的控件的ID;可选属性:Rounded:是否使控件角圆滑;True/False ;Radius:控件角的圆滑程度,正整数,数字越大越接近圆形;该属性影响控件的大小;Opacity:阴影透明度,0~1小数,数字越大越不透明;12 DynamicPopulateExtender 生成Html替换掉控件13 FilteredTextBoxExtender 输入文本过滤过滤掉不符合格式的字符,输入不符合格式的字母时界面无显示;控件必须包括如下属性:TargetControlID: 目标TextBox的ID;FilterType:过滤的类型,可选为:Custom,Numbers等;可多选中间用逗号隔开;可选属性:FilterMode:过滤模式,选InvalidChars时,配合属性InvalidChars表示禁止录入这些字符;选V alidChars时,配合属性V alidChars表示只允许这些字符录入;ValidChars:当FilterType为Custom时并且FilterMode为V alidChars允许的字符,例如“×+-/”表示为允许录入上述字符;InvalidChars:当FilterType为Custom时并且FilterMode为InvalidChars禁止录入的字符,例如“×+-/”表示为不允许录入上述字符;14 HoverMenuExtender 扩展GridView鼠标放上显示编辑,删除等菜单无在GridView中,形成鼠标放上显示菜单项,例如显示编辑,删除选项;15 ListSearchExtender List类控件扩展无在List类无合适选项时可手动输入;16 MaskedEditExtender 输入控件格式设置扩展在用户输入时限制输入特定格式字符串,数字或日期;通常配合MaskedEditV alidator控件使用;控件必须包括如下属性:TargetControlID: 目标TextBox的ID;Mask:控件要验证的规则通常用9为占为符,例如“999.999.999.999”;MaskType:验证类型,可为时间,日期,数字等;可选属性:MessageValidatorTip:用户输入时是否提示消息;OnFocusCssClass:控件获得焦点是的CssClass类名;OnInvalidCssClass:未通过验证时的CssClass类名;InputDirection:输入的类型,如:RightToLeft 从右到左,未搞明白干什么的;DisplayMoney:显示钱的符号位置,左或右;不写则为不显示该符号;AcceptNegative:未搞明白干什么的;ErrorTooltipEnabled:未搞明白干什么的;17 MaskedEditValidator输入控件验证扩展,配合MaskedEditExtender使用配合MaskedEditExtender使用,验证用户输入;控件必须包括如下属性:ControlExtender:要扩展的控件ID,一般为一个MaskedEditExtender控件;ControlToValidate:要验证的控件ID;可选属性:AcceptAMPM:未知;IsValidEmpty:是否可为空,true为可为空;默认允许为空;TooltipMessage:输入时鼠标放上时提示信息;MessageValidatorTip: 是否在鼠标放上时显示提示信息;ErrorTooltipEnabled:未通过验证时是否在鼠标放上是显现提示信息;EmptyValueBlurredText:空值时错误信息;EmptyValueMessage:空值鼠标放上提示错误信息;InvalidValueBlurredMessage:验证错误提示信息;InvalidValueMessage:验证失败时鼠标放上提示错误信息;Number:MaximumValue:允许的最大值;MinimumValue:允许的最小值;MaximumValueMessage:超出最大值时鼠标放上提示错误信息;MinimumValueMessage:小于最小值时鼠标放上提示错误信息MaximumValueBlurredMessage:超出最大值时错误信息;MinimumValueBlurredText:小于最小值时错误信息18 MutuallyExclusiveCheckBoxExtender 使用CheckBox实现RadioButtonList的功能使用该控件可以使设置在同一“Key“的多个CheckBox只有一个被选中;控件必须包括如下属性:ControlExtender:要扩展的控件ID;Key:多个CheckBox只有设置为同一个Key值才能保证只有一个被选中;19 NoBot 无20 NumericUpDownExtender 在文本框上添加向上向下小按钮来选择扩展文本框使其可以只能选择指定项或指定的项如图:控件必须包括如下属性:TargetControlID:要扩展的控件ID;Width:文本框宽度;否则文本框宽度为零可选属性:数字可手动输入:Minimum:可选最大值;Maximum:可选最小值;限定选项用户不可输入,如月份时:ValuesRef="January;February;March;April;May;June;July"调用WebService取得项,选中项V alue为WebService方法的返回值:ServiceUpPath:点击向上按钮调用的WebService路径,例如:“NumericUpDown.asmx”;ServiceDownPath:点击向下按钮调用的WebService路径,例如:“NumericUpDown.asmx”;ServiceUpMethod:点击向上按钮调用的WebService方法,例如:“NextValue”;ServiceDownMethod:点击向下按钮调用的WebService方法,例如:“PrevValue”;注:WebService方法签名必须有一个参数,调用时会将当前值传给该方法;可以在文本框添加两个按钮作为向上/向下按钮:TargetButtonDownID:向下按钮的ID;TargetButtonUpID:向上按钮的ID;21 PagingBulletedListExtender 扩展BulletedList使其按指定条件筛选该控件可以从BulletedList项中筛选出符合项的首字母或多个字母的项,并按相似度排序;ClientSort为true,IndexSize为2,Separator为“-”时效果如图:控件必须包括如下属性:TargetControlID:要扩展的控件ID;ClientSort:是否在客户端对生成的筛选条件排序;IndexSize:筛选条件显示几个字母;正整数;Separator:筛选条件的分隔符,例如:“-”;可选属性:SelectIndexCssClass:选择的项CssClass类ID;UnselectIndexCssClass:为选中项的CssClass类ID;22 PasswordStrength 密码强度判断控件必须包括如下属性:TargetControlID:要扩展的控件ID;DisplayPosition:强度提示显示位置,相当于被扩展的文本框;多选一;StrengthIndicatorType:强度提示模式;Text为文本,BarIndicator为进度条;PrefixText:强度提示前缀;例如:PrefixText= “密码强度:”;TextStrengthDescriptions: 密码强度描述;例如:“很弱;弱;一般;强;很强“;可选属性:PreferredPasswordLength:推荐的密码长度;正整数;配合HelpStatusLabelID使用HelpStatusLabelID:指定一个Lable随用户输入显示离推荐长度还差几个字符;StrengthStyles:不同强度时强度提示按不同的样式显示;CssClass类名,中间以逗号隔开;样式和TextStrengthDescriptions一一对应;RequiresUpperAndLowerCaseCharacters:是否验证大小写;MinimumNumericCharacters:至少要包含的数字个数;MinimumSymbolCharacters:至少要包含的符号个数;MinimumUpperCaseCharacters:至少要包含的大写字母个数;HelpHandlePosition:在文本框某个地方出现一个问号标识,点击弹出提示;23 PopupControl 无24 Rating 五个代表等级的星星选择评分生成一列或一排星星,可以点击选中,一般用来评级,或打分控件必须包括如下属性:MaxRating:总共多少个星星;CurrentRating:当前选中多少个星星;可选属性:RatingAlign:星星排列方式,可选水平和垂直;RatingDirection:设置星星从左往右还是从右到左;StarCssClass:开始的样式;例如:.ratingStar{font-size: 0pt; width: 13px; height: 12px;margin: 0px; padding: 0px; cursor: pointer;display: block; background-repeat: no-repeat;}WaitingStarCssClass:等待完成时的样式;例如:.savedRatingStar { background-image: url(Images/SavedStar.png);}FilledStarCssClass:填充时的样式;例如:.filledRatingStar{ background-image: url(Images/FilledStar.png);}EmptyStarCssClass:为选中的星星样式;例如:.emptyRatingStar { background-image: url(Images/EmptyStar.png);}包含事件:OnChanged(): 选中时激发;注:通过在Onload()方法设置Orientation可以;25 ReorderList 生成一个可以鼠标拖动排序的列表;无26 ResizableControl 生成一个可拖动改变大小的控件无27 RoundedCornersExtender 设置控件的边角弧度无28 SliderExtender 扩展TextBox形成一个滑块,可用鼠标拖动效果如图:控件必须包括如下属性:TargetControlID:要扩展的控件ID;Minimum:最小可选值;Maximum:最大可选值;Slider1_BoundControl:显现选择值的控件ID;BehaviorID:和TargetControlID相同;可选属性:Steps:分段的段数,分段后不能微调,只能选指定个特定值;Orientation:排列方式,水平还是垂直;TooltipText:鼠标放上提示;Decimals:默认值;29 SlideShowExtender 扩展Image控件生成幻灯片效果可设置多少秒换图片,向前,向后,播放和停止;控件必须包括如下属性:TargetControlID:要扩展的控件ID;一般为一个Image控件;SlideShowServiceMethod:取得图片的WebService方法;AutoPlay:是否自动播放;ImageTitleLabelID:显示图片标题的控件,一般为一个Label;ImageDescriptionLabelID:显示图片解释的控件,一般为一个Lable;NextButtonID:翻下一页的按钮ID;PreviousButtonID:翻前一页的按钮ID;PlayButtonText:播放键的文本;StopButtonText:停止键的文本;PlayButtonID:播放/停止键的控件ID;Loop:是否循环播放;PlayInterval:自动播放时间隔秒数;服务器端必须包含如下方法:可以写入后台CS页,如果该方法独立到WebService 时需添加属性SlideShowServicePath即WebService路径;[System.Web.Services.WebMethod][System.Web.Script.Services.ScriptMethod]public static AjaxControlToolkit.Slide[] GetSlides(){return new AjaxControlToolkit.Slide[] {new AjaxControlToolkit.Slide("images/Blue hills.jpg", "Blue Hills", "Go Blue"),new AjaxControlToolkit.Slide("images/Sunset.jpg", "Sunset", "Setting sun"),new AjaxControlToolkit.Slide("images/Winter.jpg", "Winter", "Wintery..."),new AjaxControlToolkit.Slide("images/Water lilies.jpg", "Water lillies", "Lillies in the water"),new AjaxControlToolkit.Slide("images/V erticalPicture.jpg", "Sedona", "Portrait style picture")};}30 TabPanel 形成Tab页效果,不多写了31 TextBoxWatermark 在填入前文本框内的提示,获得焦点后隐藏控件必须包括如下属性:TargetControlID:要扩展的控件ID;一般为一个TextBox控件;WatermarkText:水印提示文本;可选属性:WatermarkCssClass:水印的样式;32 ToggleButtonExtender将CheckBox前的小圆点替换成其他图标无33 UpdatePanelAnimation 更新数据时的动画效果34 ValidatorCalloutExtender 验证控件扩展弹出提示框动画如图:控件必须包括如下属性:TargetControlID:要扩展的控件ID;一般为一个验证控件;可选属性:HighlightCssClass:弹出框搜样式。
【转】jQuery.ajax使用方法-独孤雁-博客园
【转】jQuery.ajax使用方法-独孤雁-博客园jQuery.ajax( options )参数:•options返回值:•XMLHttpRequest使用HTTP请求一个页面。
这是jQuery的低级AJAX实现。
要查看高级抽象,见$.set、$.post等,这些方法更易于理解和使用。
但是功能上有限制(例如,没有错误处理函数)。
警告:如果数据类型指定为"script",那么POST自动转化为GET 方法。
(因为script会作为一个嵌入页面的script标签进行载入) $.ajax()函数返回它创建的XMLHttpRequest对象。
在大部分情况下,你不需要直接操作此对象。
通常,这个XMLHttpRequest对象主要用于需要手动中断XMLHttpRequest请求的时候。
注意:如果你指明了下面列出的数据类型,请确保服务端发送了正确的MIME响应类型(如. xml 的类型是 "text/xml")。
错误的MIME 类型能够导致脚本出现意想不到的问题。
请查看AJAX的范例来了解数据类型的更多信息。
$.ajax()函数需要一个参数,一个包含有键/值对的对象,用于初始化并操作请求对象。
在jQuery 1.2版本中,如果你指明了一个JSONP回调函数,你就可以从其它的域中载入JSON类型的数据,写法类似于"myurl?callback=?" 。
jQuery会自动调用正确的方法名称来代替查询字符串,执行你指定的回调函数。
或者,你也可以指定jsonp的数据类型的回调函数,此函数会自动添加到Ajax请求中。
参数选项:async(true) 数据类型: Boolean默认情况下,所有的请求都是异步发送的(默认为true)。
如果需要发送同步请求, 设置选项为false。
注意,同步请求可能会暂时的锁定浏览器, 当请求激活时不能进行任何操作。
beforeSend 数据类型: Function一个预处理函数用于在发送前修改XMLHttpRequest对象,设置自定义头部等。
AjaxControlToolkit控件简要介绍
AjaxControlToolkit控件介绍1.Accordion功能:实现了QQ、Msn好友分类的折叠效果,就像包含了多个CollapsiblePanels细节: (1)不要把Accordion放在Table种同时又把 FadeTransitions 设置为True,这将引起布局混乱(2)每一个 AccordionPane control 有一个Header 和Content的 template(3)在Content中可以进行任意扩展,你什么都可以放上^_^(4)有三种AutoSize modes :None(推荐) Limit Fill(5)Accordion表现的更像是一个容器2. AlwaysVisibleControl功能:最多的应用是在线小说的目录和不胜其烦的浮动小广告细节: (1)避免控件闪烁,把这个控件要在目标位置时使用absolutely position(2) HorizontalSide="Center" VerticalSide="Top" 使用这个方法控制浮动在什么位置3.Animation功能:28个控件种效果最酷的!顾名思义实现动画效果细节: (1)不只是控件:pluggable, extensible framework(2)用在什么时候:OnLoad OnClick OnMouseOver OnMouseOut OnHoverOver OnHoverOut(3)具体使用有很多可以谈的,有理由单独写一个Animation Xml 编程介绍4.CascadingDropDown功能:DropDownList联动,调用Web Service细节: (1)DropDownList行为扩展(2)如果使用Web service 方法签名必须符合下面的形式:[WebMethod]public CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category){...}5.CollapsiblePanel功能:Xp任务栏折叠效果细节: (1)可以扩展任何一个 Panel control(2) CollapsiblePanel 默认认为使用了标准 CSS box model 早期的浏览器要!DOCTYPE 中设置页面为自适应方式提交数据rendered in IE's standards-compliant mode.6.ConfirmButton功能:就是弹出来一个确定对话框7.DragPanel功能:页面拖动细节: (1)TargetControlID 要拖动的控件(2)DragHandleID 拖动的标题栏所在的ControlID8.DropDown功能:什么都可以以下拉菜单的形式弹出来细节: (1)TargetControlID要在什么控件上实现扩展(2)DropDownControlID弹出来什么9.DropShadow功能:阴影效果,其实可以放给美工实现细节: (1)Width 单位:px 默认5px(2)Opacity 不透明度0-1.0 默认.510.DynamicPopulate功能:能实用Web Service或页面方法来替换控件的内容细节: (1)ClearContentsDuringUpdate 替换之前先清除以前的内容(默认True)(2)PopulateTriggerControlID 触发器绑定的控件单击时触发(3)ContextKey传递给Web Service的随机字符串(4) Web Service方法签名必须符合下面的形式:[WebMethod]string DynamicPopulateMethod(string contextKey){...}Note you can replace "DynamicPopulateMethod" with a naming of your choice, but the return type and parameter name and type must exactly match, including case.11.FilteredTextBox功能:文本框数据过滤细节: (1)过滤条件Numbers LowercaseLetters UppercaseLetters Custom(2)过滤条件也可以是Custom的组合 FilterType="Custom, Numbers"(3)ValidChars="+-=/*()." Custom要定义这样的有效字符串12.HoverMenu功能:鼠标靠近时显示菜单,可以用在在线数据修改的表格上作为功能菜单细节: (1)PopupControlID要弹出来什么(2)PopupPostion 在哪里弹出来Left (Default), Right, Top, Bottom, Center.(3)OffsetX/OffsetY 弹出项与源控件的距离(4) PopDelay 弹出延时显示单位milliseconds. Default is 100.13.ModalPopup功能:Xp的关机效果,后面全部灰掉,很多邮箱的删除对话框都着种效果细节: (1)本质上讲这是一个对话框模版,比ConfirmButton有意义有更强的扩展性!(2)从下面的代码中我们发现点OK的时候可以调用后台方法(3)同时可以执行一段脚本14.MutuallyExlcusiveCheckBox功能:互斥复选框就像Radio一样细节: (1)Key属性用来分组就像RdiolistGroup一样(2)argetControlID用来绑定已有的CheckBox15.NoBot功能:Captcha 图灵测试反垃圾信息控件细节: (1)OnGenerateChallengeAndResponse 这个属性是EventHandler<NoBotEventArgs> 调用服务器端的方法,注意方法签名例如: protected void CustomChallengeResponse(object sender, NoBotEventArgs e) {……}16.NumericUpDown功能:实现Winform里面的Updown细节: (1)普通整数增减(2)值列表循环显示比如下面的第二个例子RefValues(3)调用Web Service的格式:17.PagingBulletedList功能:扩展BulletedList的分页功能细节: (1)可以控制每页最多显示多少条,是否排序(2)IndexSize表示index headings 的字符数,如果MaxItemPerPage设置了概属性被忽略(3)MaxItemPerPage分页每页最大条数18.PasswordStrength功能:验证密码强度细节: StrengthIndicatorType两种显示方式:文字提示,进度条提示19.PopupControl功能:任何控件上都可以弹出任何内容细节: (1)TargetControlID - The ID of the control to attach to(2)PopupControlID - The ID of the control to display(3)CommitProperty -属性来标识返回的值(4) CommitScript -把返回结果值通过脚本处理,用到CommitProperty20.Rating功能:级别控件21.ReorderList功能:这个控件的炫酷程度仅次于Animation ,可以动态移动数据细节: (1)绑定数据,拖动数据之后数据将被更新到绑定源(2)它不是已有控件的扩展是全新的服务器端控件,只是它对Ajax行为是敏感的(3)重排的实现有两种方式:CallBack PostBack 前者的发生在页面上是没有PostBack的(也就是没有刷新页面)(4) 而数据添加或者编辑的时候就必须要使用PostBack来同步服务器端的数据状态(5)PostbackOnReorder就是针对两种策略进行选择(6)可以扩展的很多22.ResizableControl功能:就像设计状态一样可以拖动修改大小23.RoundedCorners功能:控件圆角纯粹是控制外观的了,什么时候审美疲劳了还要改,呵呵细节: (1)还有一个非常非常坑人的地方:你必须要设置 CssClass="roundedPanel"要不然不起作用(2) Radius设置弧度,默认是5(3)好象只适用于容器24.Slider功能:实现WinForm中的Slider控件效果细节: (1)修改文本框的值也可以影响Slider的状态!这个反馈还是有用的!25.TextBoxWatermark功能:文本水印26.UpdatePanelAnimation功能:更新动画效果细节:代码结构简单但是要说的东西很多,回头再说写专题吧27.ToggleButton功能:就是把一个CheckBox的逻辑应用到一个按钮上,于是就有了双态按钮这么个玩意,有点意思啊28.ValidatorCallout功能:Windows系统中最常见的气泡提示,比如你磁盘空间不足的时候……细节:是对数据验证控件的扩展,比较新鲜。
ajax的使用步骤
ajax的使用步骤AJAX(AsynchronousJavaScriptandXML,异步的JavaScript和XML),是一种创建交互式网页应用的技术,它使用JavaScript、XML 和HTML来实现网页与服务器之间的异步数据交互。
通过使用AJAX,开发人员可以让用户浏览网页时不必重新加载整个页面,从而可以更高效地实现网页的交互式能力。
虽然AJAX的技术和过程非常复杂,但AJAX的使用步骤相对来说比较简单。
下面介绍AJAX的使用步骤:第一步:创建XMLHttpRequest对象AJAX应用程序中用于发送和接收数据的核心对象是XMLHttpRequest,它允许用户在浏览器和服务器之间进行异步数据交互。
通常,AJAX应用程序使用JavaScript来创建XMLHttpRequest对象。
下面是常见的方法://建XMLHttpRequest对象var xhr = new XMLHttpRequest();第二步:发送HTTP请求当XMLHttpRequest对象创建完成后,开发人员就可以使用它来向Web服务器发送HTTP请求。
通常,开发人员使用open()方法和send()方法来发送HTTP请求,下面是一个例子://送HTTP请求xhr.open(GET example.php true);xhr.send(null);第三步:处理服务器响应服务器完成对异步请求的处理后,会向客户端发送响应。
XMLHttpRequest对象具有一个特殊的属性onreadystatechange,它会调用一个JavaScript函数来处理响应。
处理响应时,可以检查XMLHttpRequest.readyState属性的值是否大于等于4,如果大于等于4,则表示响应已经完成。
//理服务器响应xhr.onreadystatechange = function() {if (xhr.readyState == 4) {//应完成if (xhr.status == 200) {//求成功} else {//求失败}}};第四步:解析响应当服务器向客户端发送响应时,客户端通常会将响应的内容解析为XML或JSON,并将其持久化到浏览器中。
ajax的使用方法
ajax的使用方法Ajax的使用方法一、什么是AjaxAjax(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术。
它通过在后台与服务器进行数据交换,局部刷新页面,实现无需刷新整个页面的交互效果。
Ajax的核心技术是使用XMLHttpRequest对象与服务器进行异步通信。
二、Ajax的基本使用步骤1. 创建XMLHttpRequest对象在使用Ajax之前,首先需要创建一个XMLHttpRequest对象,用于与服务器进行通信。
可以通过以下代码创建XMLHttpRequest对象:```var xhr = new XMLHttpRequest();```2. 设置请求的参数在与服务器进行通信之前,需要设置请求的参数。
可以使用`xhr.open()`方法设置请求的方式、URL地址和是否异步等参数。
例如:```xhr.open('GET', '/api/data', true);```其中,第一个参数是请求方式(GET或POST),第二个参数是请求的URL地址,第三个参数表示是否异步。
3. 发送请求设置好请求的参数之后,可以通过`xhr.send()`方法发送请求。
例如:```xhr.send();```如果是POST方式的请求,可以在`send()`方法中传递要发送的数据。
4. 监听服务器的响应在发送请求之后,需要监听服务器的响应。
可以通过`xhr.onreadystatechange`事件来监听状态的改变,当状态码为4时表示请求已完成。
可以通过以下代码来监听响应:```xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 处理服务器的响应数据}}```其中,`xhr.readyState`表示当前请求的状态,`xhr.status`表示服务器的响应状态码。
AJAX Control Toolkit功能篇
1-5
AutoComplete控件
服务文件中的类与方法 类上需要添加一些内容
这个需要 手动增加
1-6
AutoComplete控件
类里的方法定义
方法名称就是AutoComplete控件的 ServiceMethod属性设置值
表示与数据绑定控件结合使用的 Microsoft Access 数据库。
1-7
1-19
DragPanel控件
常用属性
• TargetControlID属性:要被设置为可拖曳的 属性: 属性 要被设置为可拖曳的Panel控件 控件
名称
• DragHandleID属性:要提供拖曳控制 属性: 控件, 属性 要提供拖曳控制Panel控件,也就 控件
是当用户在此Panel控件上单击鼠标左键进行拖曳动作 控件上单击鼠标左键进行拖曳动作 是当用户在此 属性指定的Panel控件就会移动, 控件就会移动, 时,TargetControlID属性指定的 属性指定的 控件就会移动 但注意,此时DragHandleID属性指定的 属性指定的Panel控件并不 但注意,此时 属性指定的 控件并不 会移动。 会移动。
1-16
ConfirmButton控件
属性
• TargetControlID属性:要使用 属性: 属性 要使用ConfirmButton控件来 控件来
显示确认窗口的Button控件的名称。 控件的名称。 显示确认窗口的 控件的名称
• ConfirmText属性:显示在确认窗口中的提示文字 属性: 属性
第二层的格式
1-14
CascadingDropDown控件
网页例子
第一层DropDownList控件
第二层DropDownList控件
(word完整版)AJAX(用法总结-精华版),推荐文档
1、ajax 是什么 ?ajax: asynchronous javascript and xml: ajax 是一种用来改善用户体验的技术,其本质是利用浏览器内置的一种特殊的对象 (XMLHttpRequest ) 异步( 即发送请求时,浏览器不会销毁当前页面,用户可以继续在当前页 面做其它的操作 )的向服务器发送请求 , 并且利用服务器返回的数据 (不再是一个完整的页面, 只是部分的数据,一般使用文本或者 xml 返回) 来部分更新当前页面。
使用 ajax 技术之后,页面无刷新,并且不打断用户的操作 2、 ajax 对象(1) 如何获得 ajax 对象 ?XMLHttpRequest 并没有标准化,要区分浏览器 : function getXhr(){var xhr;if( window.XMLHttpRequest ){xhr = new XMLHttpRequest();}else{ xhr = new ActiveXObject('Microsoft.XMLHttp'); } 类型的值,不同的值表示不同的含义 :0: ( 为初始化 ) --> 对象已建立,但是尚未初始化 ( 尚未调用 open 方法 )1: ( 初始化 ) --> 对象已建立,尚未调用 send 方法2: ( 发送数据 ) --> send 方法已调用3: ( 数据传送中 ) --> 已接受部分数据4: ( 响应结束 ) --> 接收了所有的数据(3)ajax 编程的基本步骤1) 获取 ajax 对象 (XmlHttpRequest )2) 使用 XmlHttpRequest 向服务器发送请求3) 在服务器端处理请求4) 在监听器当中,处理服务器返回的响应1) 获取 ajax 对象 (XmlHttpRequest)var xhr = getXhr();异步的 javascript 和 xml 。
ajax新手入门教程-适合初学者
初学者入门教程,来源于网络 AJAX 简介AJAX 全称为“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML) ,是一种创 建交互式网页应用的网页开发技术。
类似于 DHTML 或 LAMP,AJAX 不是指一种单一的技 术,而是有机地利用了一系列相关的技术。
AJAX 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用 程序的技术。
通过 AJAX,您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来 直接与服务器进行通信。
通过这个对象, 您的 JavaScript 可在不重载页面的情况与 Web 服 务器交换数据。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求) ,这 样就可使网页从服务器请求少量的信息,而不是整个页面。
AJAX 可使因特网应用程序更 小、更快,更友好。
AJAX 是一种独立于 Web 服务器软件的浏览器技术。
AJAX 基于下列 Web 标准: • • • • JavaScript XML HTML CSS在 AJAX 中使用的 Web 标准已被良好定义,并被所有的主流浏览器支持。
AJAX 应用 程序独立于浏览器和平台。
1. AJAX 使用 Http 请求在传统的 JavaScript 编程中,假如您希望从服务器上的文件或数据库中得到任何的信 息, 或者向服务器发送信息的话, 就必须利用一个 HTML 表单向服务器 GET 或 POST 数 据。
而用户则需要单击“提交”按钮来发送/获取信息,等待服务器的响应,然后一张新的页 面会加载结果。
由于每当用户提交输入后服务器都会返回一张新的页面,传统的 web 应用 程序变得运行缓慢,且越来越不友好。
通过利用 AJAX,您的 JavaScript 会通过 JavaScript 的 XMLHttpRequest 对象,直接与服务器来通信。
Ajax使用手册
Ajax使用手册引言Ajax的主要组件是javascript,Ajax不只是一种技术,更贴切来说是一个技巧。
Ajax目前在大多数浏览器中均能使用,而且不需任何其它软件或硬件支持。
Ajax的核心是XHR(XMLHttpRequest),允许从服务器异步获取任意数据。
AJAX异步指用户可以在点击一个按钮提交之后再在同页面做别的事情。
而传统的非AJAX页面是无法做到的,提交之后只有等待。
Ajax框架DWR是一个Open Source的java项目。
DWR可以让JavaScript调用运行在Web服务器里面的JAVA程序。
简单一点或者专业一点就是Easy AJAX for JAVA.DWR是Ajax的一个框架,如同MVC有了Struts等一样。
Ajax应用步骤1、下载dwr.jar布置在应用的\WEB-INF\lib下,下载dwr.xml布置在应用的\WEB-INF 下(dwr.jar包括ajax常用的核心处理类dwr.xml是DWR的配置文件,所有需要在JavaScript中调用的java的类都必须在这个文件中描述 )2、web.xml配置<servlet><servlet-name>dwr-invoker</servlet-name><servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class><init-param><param-name>debug</param-name><param-value>false</param-value></init-param></servlet><servlet-mapping><servlet-name>dwr-invoker</servlet-name><url-pattern>/dwr/*</url-pattern></servlet-mapping>3、编写一个处理请求的类文件,如public class DWRTest {public String getMyName(){return"wbw";}}4、配置类文件dwr.xml将DWRTest类配置在dwr.xml中。
跟我学AJAX技术——如何应用AJAX实现实时校验的Web应用示例(第三部分)
1.1跟我学AJAX技术——如何应用AJAX实现实时校验的Web应用示例(第三部分)1.1.1添加项目中的表示层相关的页面组件1、添加registerSuccess.jsp<%@ page language="java" pageEncoding="GB18030"%><%@ taglib uri="/tags-bean" prefix="bean" %><%@ taglib uri="/tags-html" prefix="html" %><%@ taglib uri="/tags-logic" prefix="logic" %><%@ taglib uri="/tags-tiles" prefix="tiles" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html:html lang="true"><head><html:base /><title>registerSuccess.jsp</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css"> --></head><body>您的同步的注册请求被正确地处理了!</body></html:html>2、registerSuccess1.1.2测试本示例的应用效果1、再部署该应用2、输入http://localhost:8080/StrutsAJAXWebApp/userRegister.jsp当我们输入用户名称为:yang时,将出现下面的错误提示内容。
jquery ajax用法
jquery ajax用法
jQuery的AJAX方法是一种使用JavaScript来处理异步请求的方法。
它允许您从服务器异步加载数据并更新页面的特定部分,而无需刷新整个页面。
在使用jQuery的AJAX方法时,您需要提供以下参数:
1. URL:指定要请求的服务器页面的URL。
2. Type:指定请求的类型,可以是get、post等。
3. Data:设置要发送到服务器的数据,可以是object、string等。
4. DataType:指定服务器响应的数据类型,可以是json、xml、html等。
5. Success:指定成功时要执行的回调函数。
6. Error:指定失败时要执行的回调函数。
例如,以下代码演示了如何使用jQuery的AJAX方法来从服务器加载数据:
.ajax({
url: "ajax.php",
type: "POST",
data: {id: 1},
dataType: "json",
success: function(data) {
成功时的回调函数
console.log(data);
},
error: function() {
失败时的回调函数
console.log("Error!");
}
});
此代码将使用POST方法向ajax.php发送数据{id:1},并期望以JSON格式接收响应。
如果成功,它将在控制台中输出响应数据。
如果出现错误,它将在控制台中输出"Error!"消息。
ajax php ppt课件
详细描述
PHP在Web开发领域应用广泛,如动态网页生成、表单处理、文件上传下载等。同时,PHP也常用于 开发内容管理系统,如WordPress等。此外,PHP在电子商务平台和社交媒体平台中也有广泛应用, 如淘宝、京东、微信等平台的后端开发。
AJAX 允许在后台与服务器进行数据交换, 减少了不必要的页面刷新,提高了数据交 互的效率。
增强网站功能
与 PHP 结合
通过 AJAX,可以创建更复杂、更丰富的网 站功能,如实时搜索、动态表单等。
PHP 是一种服务器端脚本语言,可以处理 服务器端的逻辑和数据。与 AJAX 结合, 可以实现前后端分离,提高开发效率。
要点二
详细描述
在 AJAX 的工作过程中,首先通过 JavaScript 创建一个 XMLHttpRequest 对象,然后使用该对象的 open() 方法 指定请求的 URL、请求类型(GET 或 POST)和是否异步 处理请求。接下来,使用 send() 方法发送请求到服务器。 当服务器处理完请求并返回响应时,JavaScript 通过 XMLHttpRequest 对象的 onreadystatechange 事件监 听器检测到响应状态的变化,并获取响应数据。最后, JavaScript 对响应数据进行解析和处理,更新网页内容。
02
PHP 简介
PHP 的定义
总结词
PHP是一种通用的开源脚本语言,主要用于Web开发,也可用于开发命令行脚 本和桌面应用程序。
详细描述
PHP是一种服务器端脚本语言,它嵌入在HTML中,并由服务器解析执行,生 成动态的Web页面。PHP语言具有简单易学、功能强大、跨平台等特点,被广 泛应用于Web开发领域。
AjaxControlToolkit(下)
1.MutuallyExclusiveCheckBox控件1.1【功能概述】MutuallyExclusiveCheckBox 是一个可以使得CheckBox 具有类似RadioButton 一样,在一系列的选项中只能选择一个的功能。
但是和RadioButton 不同,MutuallyExclusiveCheckBox 除了在一系列选项中选择一个的功能外,MutuallyExclusiveCheckBox 还可以呈现“不选任何一个”的状态。
1.2.【细节】<ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server"ID="MustHaveGuestBedroomCheckBoxEx"TargetControlID="MustHaveGuestBedroomCheckBox"Key="GuestBedroomCheckBoxes" />∙TargetControlID - 被 MutuallyExclusiveCheckBox 所控制的 CheckBox 控件 ID ∙Key - 用作标示为“同一组”的只可选其一的标识1.3【功能截图】2.NoBot2.1【功能概述】提供了简单的Captcha 图灵测试用来屏蔽bot/spam 垃圾信息。
是一个反垃圾信息控件。
我查了一下资料,我的理解是:比如你点击一个按钮需要一秒钟的时间,而这一秒钟的时间你不可能再做其他的操作比如再点一次;这样区分出了人和机器。
避免机器人自动点击注册暴力破解之类的事情2.2.【应用场景】网络上的垃圾信息似乎无处不在,从前是垃圾邮件、广告等。
而现在,这些无孔不入的垃圾信息发布者又盯上了互联网上的各大网站。
各种机器人程序(Bot)应运而生,它们可以自动在网络上爬行并寻找带有评论或留言功能的页面,随即自动填写表单并提交,其提交垃圾信息的数量和质量更是让传统的手工发布者自愧不如。
快速浏览AjaxControlKit
快速浏览 AjaxControlKit 1.AlwaysVisibleControlExtender重要的几个属性:1.TargetControlID:需要悬浮的控件 ID。
2.VerticalSide:垂直方向悬浮方式:top,Middle,Bottom。
3.HorizontalSide:水平方向悬浮方式:left,center,right。
4.ScrollEffectDuration 从原始位置到定义的位置的移动效果时长。
Code<%@ RegisterAssembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="aj axToolkit" %><div><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><div><asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><div style="width:230px;height:100px"><asp:Panel ID="timer" runat="server"Width="250px" BackColor="White" ForeColor="DarkBlue"BorderWidth="2" BorderStyle="solid" BorderColor="DarkBlue" style="zindex: 1; backgroundcolor:Green;"><div style="width: 100%; height: 100%; verticalalign: middl e; textalign: center;"><p>This is the Effect </p><span class="style1">我能始终悬浮</span></div></asp:Panel><ajaxToolkit:AlwaysVisibleControlExtender ID="AVCEx1" runat="se rver"TargetControlID="timer"VerticalSide="Top"VerticalOffset="10"HorizontalSide="Center"HorizontalOffset="10"ScrollEffectDuration=".1" /></div></ContentTemplate></asp:UpdatePanel></div></div>2.CalendarExtender主要属性:1.TargetControlID:需要扩展日历控件输入的文本框 ID2.CSSClass:展示的日历的CSS 样式类3.Format:所选择的日期的转化格式4.PopupButtonID:触发 CalendarExtend 控件 ID,不选择则默认为被更新的文本框 IDCode<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server"PopupPosition="BottomRight" TargetControlID="TextBox1"CssClass="MyCalendar"Format="MMMM d, yyyy"></ajaxToolkit:CalendarExtender>扩展的日历的语言根据用户实际所在语言环境而改变,需要在 scriptmanager 中定义 Code<asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobaliz ation="True" EnableScriptLocalization="True"></asp:ScriptManager>3.AutoCompleteExtender主要属性:1.TargetControlID:需要智能感知的 TextBox的 ID。
AJAX第4章Control_Toolkit功能篇共26页
ConfirmButton控件
由于是服务器端网页设计语言,以往在浏览器 端轻而易举就能实现Javascript功效,在Asp中反而困 难重重。一个按钮事件的确认弹出式窗口就是明显的例 子。在ConfirmButton出现以前,需要在按钮 OnClientClick事件中编写Javascript程序代码,如今 有了ConfirmButton控件,只要拖曳控件,就可以完成。
FilteredTextBox控件是搭配TextBox控件使用的扩展 功能控件,它可以防止用户输入不合规定的数据,在输 入过程时,只有指定的文字类型会了出现在TextBox控 件的输入框内,其余按键一律无效,可惜只能过滤英文, 要限制中文,必须自行编写Javascript代码。
1-9
FilteredTextBox控件
属性 • TargetControlID属性:要使用ConfirmButton控件来
显示确认窗口的Button控件的名称。 • ConfirmText属性:显示在确认窗口中的提示文字
1-3
ConfirmButton控件
页面实例
用模板设计显示 格式
1-4
DragPanel控件
DragPanel控件的功能是让网页上的Panel控件能够自 由拖曳,于是用户可以将这些网页元素放置在自己喜欢 的位置上,DragPanel控件另一个重要用途是可经由 Panel控件的巧组合,创建拖曳式面板
常用属性 • TargetControlID属性:要使用FilteredTextBox控件限
制用户输入格式的TextBox控件名称 • FilterType属性:设置可输入文字类型,如果要同时使
用多种类型,只要在类型名称之间用逗号(“,”)分隔。 若是使用Custom类型,必须设置ValidChars型属性指 定可以输入的文字。 • ValidChars属性:当FilterType属性值设为Custom时, 设置可以输入的文字,若FilterType属性值不是 Custom,则本属性无效。
$.ajax()方法详解-ajax怎么用
$.ajax()方法详解:ajax怎么用1.url:要求为String类型的参数,(默认为当前页地址)发送请求的地址。
2.type:要求为String类型的参数,请求方式(post或get)默认为get。
注意其他H请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
3.timeout:要求为Number类型的参数,设置请求超时时间(毫秒)。
此设置将覆盖$.ajaxSetup()方法的全局设置。
4.async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。
如果需要发送同步请求,请将此选项设置为false。
注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
5.cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。
6.data:要求为Object或String类型的参数,发送到服务器的数据。
如果已经不是字符串,将自动转换为字符串格式。
get请求中将附加在url后。
防止这种自动转换,可以查看processData选项。
对象必须为key/value格式,例如{foo1:”bar1”,foo2:”bar2”}转换为&foo1=bar1&foo2=bar2。
如果是数组,JQuery将自动为不同值对应同一个名称。
例如{foo:[“bar1”,”bar2”]}转换为&foo=bar1&foo=bar2。
7.dataType:要求为String类型的参数,预期服务器返回的数据类型。
如果不指定,JQuery 将自动根据H包mime信息返回responseXML或responseText,并作为回调函数参数传递。
可用的类型如下:xml:返回XML文档,可用JQuery处理。
html:返回纯文本HTML 信息;包含的script标签会在插入DOM时执行。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
第3章Ajax ToolKit的使用 AJAX 工具箱(Control Toolkit)是在微软的倡导下采用”开源”的方式,由各个“社区”(Communities)的开发人员或业余爱好者共同进行开发,并且用最快的速度发布,以便更广泛地发动群众参与,并吸取群众智慧。
目前已经发布的比较成熟的成果四十多个,微软还将不断发布新成果(预计每两个月发布一次)。
这些成果中有的是浏览器端控件,也有的是服务器端控件,有的是对原有控件功能的增强,也有的是独立的新控件。
3.1安装 AJAX Control Toolkit控件为了使用 AJAX 的Ajax Control Toolkit控件,需要下载并安装相关控件,步骤如下:1.下载并解压Toolkit控件选择下列URL: /releases/view/33804下载,并将下载的文件解压到指定的目录中。
[注]:按照上面的url下载原来的版本(Original Ajax Control Toolkit).请注意,在这里不要下载 Library Beta 0911。
因为这个版本只能适用于VS 2010版。
2.安装Toolkit控件安装的步骤如下:1)先创建一个网站,并打开一张网页;2)右击工具箱,然后在工具箱中建立一个新标签(Add Tag),例如取名为“Ajax Control Toolkits”;3)右击该标签,选用“选择项目”(Choose Items),并在打开的对话窗口右下方,通过“浏览按钮”(Browse),在前面解压的目录中用鼠标双击“AjaxControlToolkit.dll文件”,最后按“确定”按钮,此时在网站的工具箱中将自动增加40多个Toolkit控件。
下面摘要介绍几个常用的Toolkit控件的使用方法。
需要时可以通过以下网站进一步学习其他控件的使用方法:/ajaxtoolkit/3.2 设计Accordion:可折叠面板Accordion是一个独立的控件. 它是英文"手风琴"的意思,代表这个控件能像手风琴那样折叠或展开.当一个列表中的项目很多,不便于阅读时,可以将列表项先归类到不同的面板中,并允许随时折叠或展开,阅读起来非常方便.网站中的"工具箱"中的控件本身就是用这种方式组织的.3.2.1 Accordion的嵌套结构使用Accordion的关键是,将文档正确地归类并组织成嵌套的结构.1.控件的嵌套结构假定给三个面板进行折叠或展开,其嵌套的代码如下:<form id="form1" runat="server"><div><asp:ScriptManager ID="ScriptManager1" runat="server" /><asp:Accordion ID="Accordion1" runat="server"><Panes><!—第一块面板开始-< asp:AccordionPane ID="AccordionPane1" runat="server"><Header><a href="" onclick="return false">第一页</a></Header><Content><p> 这是第一块面板</p></Content></asp:AccordionPane><!--第二块面板开始→<asp:AccordionPane ID="AccordionPane2" runat="server"><Header><a href="" onclick="return false">第二页</a></Header><Content><p> 这是第二块面板</p></Content></asp:AccordionPane><!--第三块面板开始→<asp:AccordionPane ID="AccordionPane3" runat="server"><Header><a href="" onclick="return false">第三页</a></Header><Content><p> 这是第三块面板</p></Content></asp:AccordionPane></Panes></asp:Accordion></div></form>结果显示如下:代码中需要强调四个问题:1.每个应用Ajax的网页都要首先放入一个ScriptManager控件,其作用主要是当网页打开时将相关的JavaScript代码从服务器送到浏览器,否则控件无法运行.2.各面板的代码都被嵌入到Accordion控件中,每一块面板用AccordionPane控件表示.控件中包括两个字段:<Header></Header>与<Content></Content>前者用于撰写标题;后者撰写实际内容.3.各个面板的Header中用以下代码来实现折叠和展开的操作:<Header><a href="" onclick="return false">第*页</a>属性标签名描述SelectedIndex 该控件初次加载时展开的AccordionPane面板的索引值HeaderCssClass 该Accordion中包含的所有AccordionPane面板的标题区域所应用的CSS ClassContentCssClass 该Accordion中包含的所有AccordionPane面板的内容区域所应用的CSS ClassAutoSize 在展开具有不同高度的AccordionPane面板时,该Accordion的总高度的变化方式。
可选如下3个值:r None:该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短r Limit:该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短,不过最高不会超过Accordion的Height属性设定值。
若是其内容高度超过了Height属性设定值,则将自动显示滚动条r Fill:该Accordion的高度将固定为Height属性的设定值,不随当前展开的不同高度的AccordionPane面板而变化。
若是某个AccordionPane的内容高度超过了Height属性设定值,则将自动显示滚动条FadeTransitions 若该属性值设置为true,则在切换当前展开的AccordionPane面板时,将带有淡入淡出效果TransitionDuration 展开/折叠一个AccordionPane面板的过程所花费的时间,单位为毫秒FramesPerSecond 播放展开/折叠AccordionPane面板动画的每秒钟帧数DataSourceID 页面中某个DataSource控件的ID,用于通过数据绑定自动生成AccordionPane面板<Panes> 该标签内将包含一系列的<ajaxToolkit:AccordionPane>标签,即Accordion- Pane的声明,用来表示Accordion中包含的面板<HeaderTemplate> 在使用数据绑定功能自动生成AccordionPane面板时,该标签内将定义每个面板的标题区域中的内容模板<ContentTemplate> 在使用数据绑定功能自动生成AccordionPane面板时,该标签内将定义每个面板的正文区域中的内容模板2.Toolkit控件以及其层次关系如下:上述代码的显示结果如下:只要点击标题,该模板即可自动打开,其他模板则自动折叠.下面再介绍几个支持原有控件的新控件.这些控件都是用JavaScript语言开发的. 它们之中有的是为了改善原有控件的外貌,有的是给原有控件增添新功能.在 3.5中设置这些新控件的方法变得更加直观和方便.3.3 几个支持Button控件的toolkit首先要在网页的form标签下所有其他控件的前面中增添ScriptManager控件.增添一Button控件.然后右击该控件,在弹出的小窗口中选择“添加扩展程序”项,将打开另一个长型窗口.里面包括有多个支持Button控件的Tool Kit控件.情况如图所示:1.增加确认功能为了给按钮增加执行前的最后确认功能,用鼠标双击ComfirmButtonExtenter控件的图标,将自动生成一ToolKit控件,并将该控件的TargetControlID属性指向被支持的控件(这里就是指向Button1).然后可以根据需要在ConfirmText的属性中填写需要确认时的提示信息.这里填写的是”确定了吗?”.控件的代码如下:<asp:Button ID="Button1" runat="server" Text="Button" /><cc1:ConfirmButtonExtender ID="Button1_ConfirmButtonExtender" runat="server" ConfirmText="确定了吗?" Enabled="True" TargetControlID="Button1"></cc1:ConfirmButtonExtender>当程序运行中用鼠标单击Button时将弹出以下提示:2. 背景中增加阴影为了给控件后面增加阴影可以使用DropShadowExtender控件.该控件有几个重要的属性:TargetControlID:支持的对象;⏹Width:阴影的宽度,缺省为5像素;⏹Opacity:阴影的透明度,从0(完全透明)到1(完全不透明);⏹trackPosition;阴影是否随控件位置的变动而改变.3.4使用几个支持TextBox的控件1. 对输入类型进行过滤为了限制只允许输入某种类型的数据时,可以选用FilteredTextBoxExtender控件.该控件有一个关键属性: FilterType代表允许输入的数据类型,共包括4种类型.它们是:⏹小写字符(LowerCaseLetters);⏹大写字符(UpperCaseLetters);⏹数字(Numbers);⏹自定义(Custom)2. 用按钮增减输入的数字双击NumericUpDownExtender图标后,给控件填写(或修改)属性.几个关键的属性如下:⏹TargetControlID:指向被支持的控件;⏹Maximum: 最大值;⏹Minimum: 最小值;⏹RefValues: 一组由数字或字符串组成的枚举型变量;⏹Width: 被支持控件的宽度,缺省值为0.⏹Step: 步进,缺省为1。