当前位置：搜档网 › AJAX控件整理(终极版)

AJAX控件整理(终极版)

AJAX控件

下面开始愉快的学习之旅。

首先介绍由VS提供的AJAX控件列表：

ScriptManager:最常用的一个，而最“没用（不需要你用）”的一个。

ScriptManagerProxy:在编写自定义控件的时候使用。

Timer:定时回发。

UpdatePanel:指定内容为更新区域。

UpdaeProgress:显示更新进度条。

显然，只有这几个控件是不能满足我们的要求的，下面介绍AJAX ControlToolkit中的控件列表：

Accordion：折叠菜单目录

AlwaysVisibleControlExtender：始终显示的控件-类似悬浮窗口

AnimationExtender：动画效果控件

AutoCompleteExtender：自动完成功能

Calendar：日历控件

CascadingDropDown：级联菜单控件

CollapsiblePanel：折叠面板控件

ConfirmButtonExtender：确认按钮

DragPanelExtender：可拖拽面板

DropDownExtender：下拉菜单

DropShadowExtender：阴影控件

DynamicPopulateExtender:动态填充控件

FilteredTextBoxExtender:过滤控件

HoverMenuExtender：菜单控件

MaskedEditExtender：编辑验证控件

ModalPapupExtender：具有关机效果的弹出式控件

MutuallyExclusiveCheckBoxExtender：互斥复选框控件

NoBot：反BOT控件

NumericUpDownExtender：加减数值控件

PagingBulletedListExtender：带项目符号的列表控件

PasswordStrength：密码强度提示控件

PopupControlExtender：弹出式控件

Rating：等级控件

ReorderList:可拖拽数据控件

ResizableControlExtender：可伸缩控件

RounderCornerExtender：锐化边角控件

SilderExtender：滑块控件

TabContainer：选项卡控件

TextBoxWatermarkExtender：文本框水印控件

ToggleButtonExtender：个性化按钮控件

UpdatePanelAnimationExtender：局部刷新动画控件

ValidatorCaloutExtender：验证提醒控件

事实上ControlToolkit当中的控件我只用过ConfirmButton和Calendar这两个之外，好像别的都没用过，这次主要的目的就是熟悉其他控件的使用。估计有一些控件也没有多大用途，在以后估计也没什么地方会用到，所以我都不用担心，你还担心什么呢？呵呵，继续，GO！

1.AutoComplete自动完成控件：

功能：该控件实现自动提示，相信大家在上网的时候都遇到过在填写TextBox内容的时候，会自动提示以前输入过的数据，这个控件就是这样的功能。

属性:

1.TargetControlID:指定要实现提示功能的控件；

2.ServicePath:WebService的路径，提取数据的方法是写在一个WebService中的；

3.ServeiceMethod:写在WebService中的用于提取数据的方法的名字；

4.MinimumPrefixLength:用来设置用户输入多少字母才出现提示效果；

https://www.sodocs.net/doc/d15203579.html,pletionSetCount:设置提示数据的行数；

https://www.sodocs.net/doc/d15203579.html,pletionInterval:从服务器获取书的时间间隔，单位是毫秒。似乎去100很合适

呵呵，在使用这个控件的时候，不适用控件之前就有自动提示功能，使用了之后反而没有了，而且添加控件之后会出现一个编译错误。需“Add AutoComplete page method”添加自动完成页的方法。如果采用这种方法，可以在该页的.cs文件中创建如下代码：[System.Web.Services.WebMethodAttribute(),System.Web.Script.Services.ScriptMet hodAttribute()]//由于要在客户端调用web服务器

public static string[] GetCompletionList1(string prefixText, int count, string contextKey)

{

return default(string[]);

}

然后，我们就可以使用一个文件来存放要自动提示的字符串，编写代码访问并返回。

当然，一种更常用的方法是单独建立一个Web服务，在里面添加该方法。需在其前面添加[System.Web.Script.Services.ScriptService]

在网上摘录的一个该方法的完整代码如下：

[System.Web.Script.Services.ScriptService]

public class AutoComplete : System.Web.Services.WebService {

public AutoComplete() {

//Uncomment the following line if using designed components

//InitializeComponent();

}

private static string[] autoCompleteWordList = null;

[WebMethod]//这里就是提取自动提示字符串的方法，在ServeiceMethod中调用

public string[] GetCompleteList(string prefixText, int count)

{

if (autoCompleteWordList == null)

{

string[] temp =

File.ReadAllLines(Server.MapPath("~/App_data/CompleteList.txt"));

Array.Sort(temp,new CaseInsensitiveComparer());

autoCompleteWordList = temp;

}

int index = Array.BinarySearch(autoCompleteWordList,prefixText,new CaseInsensitiveComparer());

if (index < 0)

{

index = ~index;

}

int matchingCount;

for (matchingCount = 0; matchingCount < count && index + matchingCount < autoCompleteWordList.Length; matchingCount++)

{

if (!autoCompleteWordList[index +

matchingCount].StartsWith(prefixText,

StringComparison.CurrentCultureIgnoreCase))

{

break;

}

string[] returnValue = new string[matchingCount];

if (matchingCount > 0)

{

Array.Copy(autoCompleteWordList,index,returnValue,0,matchingCount);

}

return returnValue;

}

2.FilteredTextBox过滤控件

功能：过滤文本框中指定的内容，用于防止用户输入不合法的字符。

属性：

1.TargetControlID：被控制文本的ID

2.FilterType：过滤类型，提供4中类型。可以使用“，”间隔设置多种类型

3.ValidChars：当FilterType的属性包含“Custom”时，此属性有效，表示有效的字符。

3.MaskedEdit编辑验证控件

MaskedEditValidator

MaskedEditExtender

功能：用来设置文本框显示时的一些格式。

属性：

1.Mask：类似正则表达式

2.MessageValidatorTip：是否提示验证信息

3.OnFocusCssClass：当被验证的控件获取焦点时，应用的样式

4.OnInvalidCssClass：当被验证的控件验证失败时，应用的样式

5.MaskType：验证类型，提供四种：None、Number、Date和Time

6.InputDirection：文本输入方向

7.AcceptNegative：是否接受负数的符号“-”

8.DisplayMoney：显示金额符号的位置

9.PromptCharacter：未输入完时的提示字符。

一般包含两个控件同时使用！另一个参考验证控件。

4.PasswordStrength密码强度提示控件

功能：在用户输入密码的时候，密码在文本框后面会有一个提示，说明用户输入密码的强度。

属性：

DisplayPosition：提示信息显示的位置

StrengthIndicatorType：强度提示方式，文本和进度条

PreferredPasswordLength：最合适的密码长度

PrefixText：提示信息的前缀

TextCssClass：提示信息的样式

MinimumNumbericCharacters：密码中最少要包含的数字个数

MinimumSymbolCharacters：密码中最少要包含的特殊字符个数

RequiresUpperAndLowerCaseCharacters：是否要求大小写混合

TextStrengthDescriptions：密码强度的提示信息内容，最少2个，最多10个，排列顺序由弱到强

CalculationWeightings:4种类型的衡量标准

BarBorderCssClass：提示进度条样式

HelpStatusLabelID：帮助信息ID

HelpHandPosition：帮助信息的位置

5.TextBoxWatermark文本水印控件

功能：当文本中没有数据时，可以使用非常特殊的样式填充在文本框中，当用户开始输入内容时，这些特色样式自然消失。当用户没有输入内容，文本框失去焦点后，又出现该样式。

属性：

WatermarkText：水印效果提示的文本

WatermarkCssClass：水印效果应用的样式

6.ValidatorCallout验证提醒控件

功能：验证未通过时，弹出一个类似模式对话框的小窗口，提醒用户发生的错误。

更加醒目的验证方式!

属性：

Width：弹出式信息的宽度

WarmingIconImageUrl：弹出信息中的经过图片地址

CloseImageUrl：弹出信息中使用的关闭图片地址

7.HoverMenu菜单控件

功能：使一些菜单该出现时才出现，当鼠标移动到指定地点时不会影响其他元素属性：

PopupControlID：作为弹出式菜单的控件ID

HoverCssClass：鼠标滑过时的样式

PopupPosition：弹出式菜单坐在的位置

OffsetX：菜单举例目标控件的位置——横坐标

OffsetY：纵坐标

PopDelay：弹出菜单的延迟时间

实例：HoverMenu控件可实现简单的弹出菜单效果

参考网站：https://www.sodocs.net/doc/d15203579.html,/zh-cn/dd553520.aspx

用Repeater控件从数据库中取出数据，在ItemTemplate模板中使用PopupControl

控件，PopupControlID指向一个弹出式菜单面板，这个弹出式面板我由Panel改为

HyperLink。这里出现一个小问题，就是鼠标放在弹出式面板上，弹出式面板会跳动，不是呆在鼠标指定的那个地方。

8.PopupControl弹出式控件

功能：弹出任意类型的控件，不管是服务器控件还是Html控件

属性：

弹出式菜单属性均相似，见上。

9.Accordion（手风琴）折叠菜单目录

功能：将一组功能相似、任务相同的内容放在不同的选项卡中，然后通过选项卡的Header实现各组内容的查看。

我们可以逐一地编写Accordion中的AccordionPane控件，每个AccordionPane控件即代表一个可折叠的面板。还可以使用数据绑定的方式，分别为其指定标题和内容区域的绑定模板以及数据源，让https://www.sodocs.net/doc/d15203579.html,中的数据绑定为我们自动生成其中的若干个折叠面板。Accordion还能够把当前正处于展开状态的面板自动记录下来，并在页面回送之后恢复其提交前的样式。

属性：

SelectedIndex：在Accordion中设计的多个Pane，此属性用来判断当前选择的是哪

个Pane

HeaderCssClass：

AutoSize：设计Accordion中Pane的显示方式，主要有3种:None、Limit和Fill；None 可以无限制收缩，Limit限制内容的高度，超出部分出现滚动条，Fill表示和设置的高度一致，超出部分不会显示。

FadeTransitions：是否使用透明样式的褪色特效

TransitionDuration：特效时间间隔，单位为毫秒

FramesPerSecond:帧/秒，折叠特效的速度

Panes：是Accordition内容所在，其包装必须是“AccordionPane”控件，可以是多个Panes和AccordionPane

表声明Accordion控件时的常用属性标签

属性标签名描述

SelectedIndex 该控件初次加载时展开的AccordionPane面板的索引值HeaderCssClass 该Accordion中包含的所有AccordionPane面板的标题区域所应

用的CSS Class

ContentCssClass 该Accordion中包含的所有AccordionPane面板的内容区域所应

用的CSS Class

AutoSize 在展开具有不同高度的AccordionPane面板时，该Accordion的

总高度的变化方式。可选如下3个值：

r None：该Accordion将随着当前展开的AccordionPane面板的

高度自由伸长/缩短

r Limit：该Accordion将随着当前展开的AccordionPane面板

的高度自由伸长/缩短，不过最高不会超过Accordion的

Height属性设定值。若是其内容高度超过了Height属性设定

值，则将自动显示滚动条

r Fill：该Accordion的高度将固定为Height属性的设定值，

不随当前展开的不同高度的AccordionPane面板而变化。若是

某个AccordionPane的内容高度超过了Height属性设定值，

则将自动显示滚动条

FadeTransitions 若该属性值设置为true，则在切换当前展开的AccordionPane

面板时，将带有淡入淡出效果

TransitionDurati on

展开/折叠一个AccordionPane面板的过程所花费的时间，单位为毫秒

FramesPerSecond 播放展开/折叠AccordionPane面板动画的每秒钟帧数DataSourceID 页面中某个DataSource控件的ID，用于通过数据绑定自动生成AccordionPane面板

该标签内将包含一系列的标签，

即Accordion- Pane的声明，用来表示Accordion中包含的面板在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的标题区域中的内容模板

在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的正文区域中的内容模板

需要注意的是FadeTransitions和FramesPerSecond属性。自然，将FadeTransitions 设置为true将让面板展开/折叠的过程显得非常酷，且将FramesPerSecond属性值设置得比较高也会让展开/折叠的动画变得更加平滑，但这样也同时会加重客户端程序执行时的负担，我们应该综合考虑各种情况合理地配置这两个属性。一般来讲，若是Accordion的大小适中，且其中也没有太多的AccordionPane面板，那么可以将FadeTransitions设置为true（即显示淡入淡出效果），并将FramesPerSecond设置为40（即每秒40帧）左右，让动画效果更加流畅眩目。而若是对于较大的，甚至全屏的Accordion，或是其中包含了许多个复杂的AccordionPane面板，那么就应该将FadeTransitions设置为false，且将FramesPer Second 设置为25左右，尽可能地避免对客户端执行效率产生过多的影响。

与DataSourceID属性相关的还有DataSource和DataMember属性，分别表示将绑

定到该控件上的数据源（一般在代码中设置）和DataSource中数据成员的名称。

DataSourceID、DataSource和DataMember属性是https://www.sodocs.net/doc/d15203579.html,中每一个支持模板化数

据绑定的控件都包含的。

DropDown下拉菜单控件

功能：为任意控件指定下拉菜单，这个下拉菜单必须存在。

属性：

略

为按钮等控件执行下拉列表实现快速选择。

10.C ollapsiblePanel折叠面板控件

功能：折叠面板就是实现一个Panel的显示和隐藏，可以定义Panel的样式。

属性：

CollapsedSize：折叠后的尺寸

ExpandedSize:伸展后的尺寸

Collapsed：默认打开页面时，Panel是否处于折叠状态

ScrollContents：是否在Panel中显示滚动条

ExpandDirection：伸展方向，水平或垂直

CollapseControlID/ExpandControlID:该属性指定控制折叠/扩展的控件ID。

d)TextLabelID:指定一个控件，可以在扩展或折叠Panel时显示

CollapsedText/ExpandedText中的内容。

CollapasedText/ExpandedText:Panel折叠/扩展时的文本。

Collapsed:指定页面导入时Panel是折叠还是扩展。

ImageControlID:指定一个控件，在扩展时显示ExpandedImage中的图像;在折叠时显示CollapsedImage中的图像。

ExpandedImage/CollapsedImage:在扩展/折叠时显示不同的图像。

SuppressPostBack:禁止回传。

将Panel中的内容显示或隐藏。使用两个Panel，一个Panel用于扩展控件的ID，另一个用于折叠控件的ID。

11.D ragPanel可拖曳面板控件

功能：这是一个简单的Ajax控件，不支持拖拽前和拖拽后的事件操作

属性：

DragHandleID：实现拖拽的控件，即当拖拽DragHandleID时，实际上移动的是TargetControlID

这个控件最好配合样式表使用。

12.T abs选项卡控件

功能：在C/S中，有各种选项卡控件，B/S中没有，要在一个页面显示多组内容，可以通过CSS样式来显示和隐藏以达到选项卡的效果。

属性：

OnClientActiveTabChanged：单击选项卡标题时触发的事件

ActiveTabIndex：默认显示的选项卡

ScrollBars：是否显示滚动条

这个控件非常棒哦！

13.A nimation动画控件

功能：显示小动画

属性：

OnLoad：页面加载时触发

OnClick：单击控件时触发

onMouseOver:鼠标滑过时触发

OnMouseOut：鼠标移走时触发

OnHoverOver：与OnMouseOver类似

OnHoverOut：与OnMouseOut类似“Fade Animation”的属性主要有4个：

l duration：动画效果的时间间隔。

l Fps：帧/秒的显示速度。

l maximumOpacity：最大透明度。

l minimumOpacity：最小透明度。

假如学习了WPF或者Silverlight的话，使用Expression Blend制作的时间帧动画，就很容易理解了。

说明一下：似乎AJAX的这些控件，和WPF已经在接近了，但还是相差甚远哈，有这种趋势而已。

14.D ropShadow阴影控件

功能：实现阴影

属性：

Opacity：透明度，最大值为1，不透明，默认值为0.5

Rounded：是否锐化目标控件边角

TrackPosition：追随目标控件的位置，此属性一般应用在控件被拖动的时候

15.R ounderCorners锐化边角控件

功能：该控件同样其锐化作用，缺点是没有阴影效果，有点事可以锐化4个边角的任意一个或多个。

属性：

Radius：锐化幅度

Corners：锐化的边角，All表示所有边角

16.T oggleButton个性化按钮控件

功能：该控件只能应用于CheckBox，主要功能是以自定义图片的形式显示复选框的选中和未选中状态。

属性：

CheckedImageAlternateText：选中状态下的提示文本

UnCheckedImageAltenateText：未选中状态下的提示文本

UncheckedImageUrl：未选中状态下显示图片地址

CheckedImageUrl：选中状态下显示的图片地址

DisabledCheckedImageUrl：控件为不可用状态时，默认时要显示的图片

17.U pdatePanelAnimation局部刷新动画控件

功能：该控件用来装饰UpdatePanel更新的效果，提供对UpdatePanel更新时和更新后的特效，并允许用户自定义这些特效。

Animation 控件不仅仅是一个控件，它是一个可向控件添加动画的框架。

属性：

OnUpdating：更新时应用的特效

OnUpdated：更新后应用的特效

18.A lwaysVisibleControl始终显示控件

功能：创建一个始终显示的内容，通常用来显示菜单、消息和广告等。

属性：

VerticalSide：显示控件时垂直位置，上中下

VerticalOffset：显示控件时与最上方的距离，相对坐标

HorizontalSide：显示控件的水平位置：左中右

HorizontalOffset：显示控件与最左侧的距离，相对坐标

ScrollEffectDuration：当滚动条滚动时，显示控件的显示延迟，默认时0.1秒

ProfileBindings:要绑定的个性化配置的属性

19.C alendar日历控件

功能：可以选择到文本框中的日历控件

属性：

Format：日历显示的日期格式

PopupButtonID：当日期是通过选择某个按钮弹出的时候

可以使用PopupButtonID指向一幅图片，放在文本框后面，点击图片就可以弹出日

历控件选择日期。呵呵，由于是测试，放置了一幅大的图片。

20.C ascadingDropDown级联下拉列表控件

功能：级联菜单，当第一级可用时，第二级可用，第二级可用时，第三级不可用，依次类推。

Category：当前下拉框的类别

PromptText：当下拉框无数据和未选中数据时，给用户提示。

在使用此控件的时候，由于涉及到数据库，故按提交按钮需验证，如果将EnableEventValidation="false"，也就是不验证可以解决这个问题，但是这样就不安全了。这一点需要注意。

Category需要同从数据库中取出数据类别相同，这里是Xml数据，也就是要对应节点，在此WEB服务中的Hierarchy即存储相应类别和节点。

21.C onfirm确认按钮控件

主要属性设置时ConfirmText,即显示弹出消息框的内容。

22.D ynamicPopulate动态填充控件

允许程序在运行的过程中，更改指定控件的内容，类似于

“document.getElementById(“ControlID”).value=”Selected Control””语句。这个控件是利用createElement和appendChild等DOM方法实现的。

属性：

BehaviorID：行为ID，用于在客户端获取Ajax控件

TargetControlID：需要动态填充的内容控件

ClearContentsDuringUpdate：在更新时是否情况内容

ServicePath：获取数据需要使用的Web服务

ServiceMethod：获取数据的方法

UpdatingCssClass：更新过程中使用的样式

ContextKey：上下文关键字，通过此关键字，判断返回的数据类型

CustomScript：一段自定义的脚本，必须为能被格式化的字符串

PopulateTriggerControlID：引发填充事件的控件

23.M odalPopup具有关机效果的弹出式控件

该弹出式控件最大的特色就是具备“模式”窗口风格，在B/S应用中，使用这样风格的好处是，当用户选择这个设置时，其他内容都会受到保护。

使用这种方法，处理弹出窗口中的事件是一件很繁琐的事情，由于不能直接在弹出控件中添加服务器端方法，因为添加了也没有反应，估计要想实现事件需在客户端使用Javascript来完成。在DynamicPopulateExtender.aspx实例中可以看出。

24.MutuallyExclusiveCheckBox互斥复选框控件

功能：复选框实现多个项目选择，但是项目之间可以含有互斥项。含有相同Key的为同一组，同一组之间是互斥的，但与不同Key之间的组，是可以同时选择的。

属性：

TargetID：被控制的复选框。

Key：区分互斥复选框的键值。

同时使用多个BulletedList控件也可以实现此功能！

25.N oBot反Bot控件

功能：防止自动提交程序的运行。

属性：

OnGenerateChallengeAndResponse：自定义的相应事件，用于反BOT

ResponseMinimumDelaySeconds:响应的最小延迟，单位为秒

26.N umbericUpDown加减数值控件

功能：为一个文本框添加上下按钮，当单击这个按钮时，可以实现数字的加减，同时也可以提供静态数据，实现数据的上下选择。

属性：

Width：TextBox显示时的宽度，默认为0，不显示目标TextBox

RefValues:进行上下操作的一些静态值

TargetButtonDownID：进行“下”操作的按钮

TargetButtonUpID：进行“上”操作的按钮

在.cs页面中直接使用Page Method，不是在单独的asmx文件中使用：

注释掉会[System.Web.Services.WebMethod]（自己添加）

或者[System.Web.Services.WebMethodAttribute(),

System.Web.Script.Services.ScriptMethodAttribute()]（自动生成）会弹出错误框。还需要注意方法中的参数的数据类型。

27.P agingBulletedList带项目符号的列表控件

功能：显示一些列表项，主要的扩展对象是BulletedList控件。

属性：

ClientSort：是否在客户端进行排序

IndexSize：标题索引的字符个数

Separator：标题索引的间隔符

将相同列表开始的IndexSize个字符作为标题，点击之后展开所有以此标题为首的

列表项。

在使用服务器端代码来改变IndexSize的值时，使用TextBox时需添加AutoPostBack 属性，但是这样会出现频繁刷新的问题。如果使用UpdatePanel来实现呢，使用触

发的时候，也会遇到根本不访问服务器端代码的问题。这种的方案是：使用一个

Button控件在UpdatePanel中触发，注意触发方式采用PostBackTrigger，不要采用

异步触发AsyncPostBackTriger（注意，Button控件本来就会导致会发，所以在

UpdatePanel中也没有必要添加触发器的，说得更狠一点，就是不需要UpdatePanel

也可以，我使用触发器，不过是为了熟悉它而已。呵呵，但是这样实现的就不是使

用局部刷新了。）。。所以，最佳解决方案，还是在客户端用Javascript来实现。

28.R ating显示等级控件

功能：显示等级信息，可以以图片的形式显示。

属性：

?CurrentRating—所使用的初始评分

?MaxRating—最高评分

?EmptyStarCssClass—评分项（“星号”）为空时使用的 CSS 类

?FilledStarCssClass—评分项（“星号”）已填写时使用的 CSS 类

?StarCssClass—为一个 visible stat 使用的 CSS 类

?WaitingStarCssClass—将星级评分发送回服务器时使用的 CSS 类

?AutoPostBack ：当单击"评级"这个控件时，是否回送。默认不回送。

?OnChanged ：在完成评级之后，触发"客户端回调"事件以便执行某一段程序代码。

准备两种图像，一种用于显示填写过的评分项，另一种显示空白评分项

29.R eorderList可拖曳数据控件

功能：ReorderList控件用来显示数据，其功能相当于GridView、DataList和Repeater

等，都可以绑定数据，并支持各种模板。ReorderList的优势在于，其允许用户自定

义行的显示，即用户可以拖行到任意位置，同时还支持客户端的排序，这样可以减

少回调，提高性能。

属性标签名描述

DataSourceID 页面中某个DataSource控件的ID，用于通过数据绑

定自动生成列表项目

DataKeyField 数据源中键字段的名称，该字段中的值应该在所在

记录中是唯一且不变的，ReorderList将用条目中该

字段的值作为记录的标志，将在更新/删除中使用AllowReorder 是否允许用户对列表中的项目进行重新排序，若指

定了，则该属性将自动设置为

true

SortOrderField 数据源中作为排序字段的名称。在用户进行重新排

序之后，ReorderList将自动修改需要更新的条目的

该字段

DragHandleAlignmen t

条目的可拖动区域与条目之间的相对位置关系，可选Top（上部）、Bottom（下部）、Left（左边）和Right（右边）

PostBackOnReorder 若该属性值设置为true，则当用户对列表中的项目

进行重新排序之后，将自动引发一次整页的回送；否

则将以异步回调的方式向服务器端发送请求EditItemIndex 列表中当前处于编辑模式下的项目的索引值ShowInsertItem 若该属性值为true，则列表中将显示出一个用来添

加新条目的特殊行，即模板中

定义的内容

ItemInsertLocation 插入的新行在整个列表中的位置，可选Beginning

（第一项）或End（最后一项）

该标签内将定义列表中普通条目的模板

该标签内将定义列表条目中可拖放区域的模板。用户只有在该区域中拖放才能够对该条目进行重排序

该标签内将定义拖动列表条目时列表中可投放区域

的模板

该标签内将定义用来添加新条目的特殊行的模板

该标签内将定义处于编辑状态中的列表条目的模板

该标签内将定义空列表的模板。若列表中没有任何条目，则将显示该模板中定义的内容

对于PostBackOnReorder属性，若该ReorderList控件将只提供对项目重新排序的功能，则应该将其设置为false，这样可以充分利用ReorderList自带的异步回调功能。若是该ReorderList控件同样支持对条目的添加、删除、编辑等复杂功能，则应该将PostBackOn- Reorder属性设置为true，并用UpdatePane l包围该ReorderList，以期得到Ajax的异步回送功能。

使用这个真难拖动，真是太难了！这让我想起了WebParts，可惜我原本打算在那上面花点功夫的，但是没有，真是遗憾。好不容易实现了拖动吧，费了好大劲都不能拖动一次，只有当你自己做练习的时候才知道，估计这个以后不怎么使用。

30.R esizableControl可伸缩控件

功能：该控件可以改变其他控件的高度和宽度。

属性：

HandleCssClass：在控件中支持改变的位置所使用的样式

ResizableCssClass：改变控件大小时应用的样式

MinmumWidth/MaxmumWidth/MaxmumHeight/MinmumHeight:允许控件伸缩的最

小、最大宽度和高度

OnClientResize：控件伸缩后，客户端触发的事件

HandleOffsetX/HandleOffsetY：在控件中支持改变的位置（X/Y位置），一般是控件

的右下角相对坐标

这个控件实现的是伸缩，不是放大和缩小。也就是只能看见你整个图片的局部，你

可以拖动使得像窗口那样改变窗口大小来查看内容，注意内容大小时没有改变的。

31.S lider滑块控件

功能：该控件可以个性化地显示当前的数字值，用户还可以通过文本框，控制滑块

的数据值。

属性：

TargetControlID：该控件的目标控件，即其要扩展的控件。

BoundControlID：当改变值时，显示数据的控件。

jQuery Ajax 全解析(.ajax .post .get)

jQuery Ajax 全解析【.ajax .post .get】 1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的 key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。这个方法可以很方便的动态加载一些HTML文件，例如表单。示例代码： $(".ajax.load").load("https://www.sodocs.net/doc/d15203579.html,/QLeelulu/archive/2008/03 /30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即 $(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求参数： url (String) : 发送请求的URL地址.

ajax与php结合实现用户登录(详解)

这是login.html页面无标题文档

jQuery Ajax 应用实例解析大全

jQuery Ajax应用解析 jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) ：载入远程HTML 文件代码并插入至DOM 中。 url(String) : 请求的HTML页的URL地址。 data(Map) : (可选参数) 发送至服务器的key/value 数据。 callback(Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。这个方法默认使用GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的HTML 文档，DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。这个方法可以很方便的动态加载一些HTML文件，例如表单。示例代码： $(".ajax.load").load("https://www.sodocs.net/doc/d15203579.html,/QLeelulu/archive/2008/03/30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求参数： url(String) : 发送请求的URL地址. data(Map) : (可选) 要发送给服务器的数据，以Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。 callback(Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。这是一个简单的GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。示例代码： $.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){

PHP JQUERY AJAX 提交表单FORM详解

PHP jQuery Ajax Form表单提交实例解析，包括创建一个表单html页面、添加JQuery代码、jquery ajax表单提交、jquery ajax表单验证、反馈信息给用户，php ajax 表单验证，php ajax提交表单，php ajax form验证，php ajax提交form。本实例用到JQuery类库本身的函数和功能，所有表单信息利用PHPMailer类库邮件的形式发送。 1、创建一个表单html页面表单部分html代码这里用一个id为contact_form来包含整个包含信息；这是有意义的，稍后在JavaScript与用户交互信息的时候会用到，这里form标签的属性里面既包含了method和action；这个意义其实不大，因为Javascript直接操作DOM，所以没有这两个属性也是可以的；务必要给用户输入的input标签加独立的id，这和第二点原理类似。否则，无法看到正常的效果。 2、添加JQuery代码这里假设你已经从JQuery官方网站上下载了JQuery基库，然后上传到了你的WEB服务器，并添加到你要使用的网页中。

现在新建一个JS文件第1行的function()函数与Jquery的document.ready函数用法和功能相同，都是在DOM准备完毕后自动触发。第2行里面是一个单击触发函数click()，需要注意的是，在HTML一页提交按钮上需要放置一个名为“button”的Class，以模拟实现submit 提交表单的功能，从第二点我们可以看出，JQuery可以很好的将结构和逻辑分离。 3、jquery ajax表单验证在实际应用中，这一步是必不可少的。在用户漏填，错填某个项目时，及时提示。

jQuery调用AJAX异步操作超清晰教程

JQUERY AJAX异步操作详细说明 AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和XML）。它并非一种新的技术，而是以下几种原有技术的结合体。 1)使用CSS和XHTML来表示。 2)使用DOM模型来交互和动态显示。 3)使用XMLHttpRequest来和服务器进行异步通信。 4)使用javascript来绑定和调用。通过AJAX异步技术，可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型： 1)不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制权马上就被返回到浏览器。界面不会出现白板，在得到服务器响应之前还可以友好的给出一个加载提示。 2)不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数，待服务器响应到达时，触发回调函数，并且传递所需的少量数据。“按需取数据”也降低了服务器的压力。 3)不需要使用隐藏或内嵌的框架。在XHR对象之前，模拟Ajax通信通常使用hack手段，如使用隐藏的或内嵌的框架(标签)。下面介绍下AJAX中的重要对象：XMLHttpRequest。 XMLHttpRequest对象(XHR) XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。 XMLHttpRequest对象首次以ActiveX对象形式在微软Internet Explorer(IE) 5中以引入。其他浏览器制造商在认识到这一对象重要性后也纷纷实现了XMLHttpRequest对象，但是以一个本地JavaScript对象而不是作为一个ActiveX 对象实现。而如今，由于安全性、标准等问题，微软已经在其IE 7中把XMLHttpRequest实现为一个本地JavaScript对象。 API描述客服端请求 open(method,url,a sync, bstrUser, bstrPassword)规定请求的类型、URL 以及是否异步处理请求。 1)method：请求的类型，例如：POST、GET、PUT及PROPFIND。大小写不敏感。 2)url：请求的URL地址，可以为绝对地址也可以为相对地址。 3)async[可选]：true（默认，异步）或 false（同步）。注释：当您使用async=false 时,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。此时，不需要编写onreadystatechange回调函数，把代码放到send() 语句后面即可。</p><h2>AJAX(XMLHttpRequest)进行跨域请求方法详解</h2><p>发表于:2010-1-11 浏览:965 作者:转载遗失来源:网络转载关键字:AJAX,详解,请求描述:注意：以下代码请在Firefox3.5、Chrom e3.0、Safari4之后的版本中进行测试。IE8的实现方法与其他浏览不同。跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见注意：以下代码请在Firefox 3.5、Chrome 3.0、Safari 4之后的版本中进行测试。IE8的实现方法与其他浏览不同。跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过style 标签加载外部样式表文件、通过img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过Webfont 加载字体文件等等。默认情况下，脚本访问文档属性等数据采用的是同源策略（Same origin policy）。那么，什么是同源策略呢？如果两个页面的协议、域名和端口是完全相同的，那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同，则还可以通过设置document.domain 属性将它们认为是同源的。随着Web2.0 和SNS 的兴起，Web 应用对跨域访问的需求也越来越多，但是，在脚本中进行跨域请求是受安全性限制的，Web 开发人员迫切需要提供一种更安全、方便的跨域请求方式来融合（Mashup）自己的Web 应用。这样做的一个好处就是可以将请求分摊到不同的服务器，减轻单个服务器压力以提高响应速度；另外一个好处是可以将不同的业务逻辑分布到不同的服务器上以降低负载。值得庆幸的是，跨域请求的标准已经出台，主流浏览器也已经实现了这一标准。W3C 工作组中的 Web Applications Working Group（Web 应用工作组）发布了一个Cross-Origin Resource Sharing（跨域资源共享，该规范地址：https://www.sodocs.net/doc/d15203579.html,/TR/access-control/和 https://www.sodocs.net/doc/d15203579.html,/2006/waf/access-control/）推荐规范来解决跨域请求的问题。该规范提供了一种更安全的跨域数据交换方法。具体规范的介绍可以访问上面提供的网站地址。值得注意的是：该规范只能应用在类似XMLHttprequest 这样的API 容器内。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了Cross-Origin Resource Sharing 规范，已经可以进行跨域请求了。 Cross-Origin Resource Sharing 的工作方式是通过添加HTTP 头的方法来判断哪些资源允许 Web 浏览器访问该域名下的信息。然而，对于那些HTTP 请求导致用户数据产生副作用的请求方法（特别是对于除了GET、某些MIME 类型的POST 之外的HTTP方法），该规范要求浏览器对请求进行“预先验”，通过发送HTTP 的OPTIONS 请求头询问服务器有哪些支持的方法，在征得服务器的同意后，再使用实际的HTTP 请求方法发送实际的请求。服务器也可以通知客户端是否需要将验证信息（如Cookie 和HTTP Authentication 数据）随同请求一起发送。下面我们就采用实际的例子说明Cross-Origin Resource Sharing 是如何工作的。 1，简单请求</p><h2>JQuery中的AJAX详解</h2><p>JQuery中的AJAX详解目录(?)[-] load()方法 load(url,[data],[callback]) url为被加载的页面地址 data表示发送到服务器的数据，格式为key/value callback格式为：function(responseText,textStatus,XMLHttpRequest){ } //responseText:请求返回的内容 //textStatus:请求状态：success、error、notmodified、timeout这4种 //XMLHttpRequest:XMLHttpRequest对象 load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST 方式 [javascript]view plaincopyprint? 1.$("#div1").load( 2."jsp/feed.jsp", //如果为" jsp/feed.jsp .filterClass"，则表示获取jsp页面中类名为filterClass的全部元素 3.{ 4. name ：clf, age : 25 5.//经测试，变量名加引号、单引号、不加引号，后台都能取到值 6.//如果含有中文，必须用encodeURI()进行编码，然后再服务器端用decodeURI()解码即可，如 7.// {name:encodeURI($("#uName").val()),"password":$("#uPassword").val()}, 8.}, //也可以用数组传值，{"attr []",["clf","25","male"]} 9.function (){ 10. $("#div2").text("AJAX"); 11.} 12.); [javascript]view plaincopyprint? 1.$("div").load("wrongname.xml",function(response,status,xhr){ 2.if (status=="success")</p><h2>JQuery中$.ajax()方法参数详解</h2><p>JQuery中$.ajax()方法参数详解 url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。 async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。 cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息。 data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如 {foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery 将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为 &foo=bar1&foo=bar2。 dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache 参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery 将自动替换后一个</p><h2>Ajax技术与传统Web应用的比较</h2><p>中图分类号:TP393.01 文献标识码:B 文章编号:1009-2552(2010)01-0108-03 Ajax技术与传统Web应用的比较孙启良 (济南大学理学院,济南250022) 摘要:Ajax技术是浏览器与服务器交互方式的巨大改进,是Web2.0时代的重要标志。Ajax技术利用客户端闲置的处理能力,减轻了服务器和带宽的负担,使用户交互变得流畅而连续。介绍了Aja x的工作原理,基本特点以及与传统Web应用的区别,并给出了一个Ajax实例。关键词:HTML;Ajax;JSP;JavaScript Comparison between Ajax technology and traditional Web applications SUN Qi liang (School of Science,Jinan University,Jinan250022,China) Abstract:Ajax technology is a tre mendous improvement of the browser and server.It is also an important indicator of Web2.0era.It uses the idle processing power of client to reduce the burden on servers and bandwidth,and then the user interaction has become smooth and continuous.This paper introduces the working principle of Aja x and the difference between traditional Web applications and Aja x.Finally,a section of the source code is given. Key w ords:HTML;Ajax;JSP;JavaScript 0 引言 Aja x即异步JavaScript和XML,是Web2.0中的一项关键技术,它允许把用户和Web页面间的交互与Web浏览器和服务器间的通信分离开来。传统的Web应用允许用户填写表单(form),当提交表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单,然后返回一个新的网页。这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。如果严重超过响应时间,服务器干脆告诉用户页面不可用。另外,某些时候,如果只是想改变页面一小部分的数据,那么如何不必重新加载整个责面,减少用户等待的时间是亟待解决的问题。现在,这个问题基本得到了解决,除了更优秀的程序设计、编码优化和调整服务器之外,还可以采用Ajax技术。1 Ajax的工作原理与传统的Web应用不同,Ajax采用异步交互过程。Ajax在用户与服务器之间引入一个中间介质,消除了网络交互过程中的处理、等待等缺点。相当于在用户和服务器之间增加了一个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转移到客户端,利用客户端闲置的处理能力,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。传统Web应用程序和Ajax程序工作原理如图1所示。图1左侧图形为传统Web程序工作原理,此时服务器端承担大量的工作,客户端只有数据显示的功能。右侧图形为Ajax应用程序工作原理图,客户收稿日期:2009-07-13 作者简介:孙启良(1980-),男,讲师,在职硕士研究生,主要研究方向为计算机网络和计算机体系结构。 108</p><h2>JION数据格式详解</h2><p>JSON 数据格式解析和XML 一样，JSON 也是基于纯文本的数据格式。由于JSON 天生是为JavaScript 准备的，因此，JSON 的数据格式非常简单，您可以用JSON 传输一个简单的String，Number，Boolean，也可以传输一个数组，或者一个复杂的Object 对象。 String，Number 和Boolean 用JSON 表示非常简单。例如，用JSON 表示一个简单的String " abc "，其格式为："abc",除了字符"，\，/ 和一些控制符（\b，\f，\n，\r，\t）需要编码外，其他Unicode 字符可以直接输出。 Boolean 类型表示为true 或false 。此外，JavaScript 中的null 被表示为null，注意，true、false 和null 都没有双引号，否则将被视为一个String 。 JSON 还可以表示一个数组对象，使用[] 包含所有元素，每个元素用逗号分隔，元素可以是任意的Value，例如，以下数组包含了一个String，Number，Boolean 和一null:["abc",12345,false,null]</p><p>Object 对象在JSON 中是用{} 包含一系列无序的Key-Value 键值对表示的，实际上此处的Object 相当于Java 中的Map<String, Object>，而不是Java 的Class 。注意Key 只能用String 表示。例如，一个Address 对象包含如下Key-Value： city:Beijing street:Chaoyang Road postcode:100025（整数）用JSON 表示如下：{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}其中Value 也可以是另一个Object 或者数组，因此，复杂的Object 可以嵌套表示，例如，一个Person 对象包含name 和address 对象，可以表示如下：{"name":"Michael","address": {"city":"Beijing","street":" Chaoyang Road ","postcode":100025}} JavaScript 处理JSON 数据上面介绍了如何用JSON 表示数据，接下来，我们还要解决如何在服务器端生成JSON 格式的数据以便发送到客户端，以及客户端如</p><h2>jQuery与JavaScript各自实现AJAX异步请求验证</h2><p>jQuery和JavaScript分别实现AJAX异步请求验证 AJAX概述 1.什么是Ajax？ Ajax是由Jesse James Garrett创造的，是“Asynchronous JavaScript + XML 的简写”。 2.Adaptive Path公司的Jesse James Garrett 这样定义Ajax： Ajax不是一种新技术，而是一种新的理念。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。 Ajax包含：基于XHTML和CSS标准的表示；使用Document Object Model进行动态显示和交互；使用XMLHttpRequest与服务器进行异步通信；使用JavaScript绑定一切。 3. 与传统的Web应用不同，AJAX采用异步交互过程。（1）.AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。（2）.用户的浏览器在执行任务时即装载了AJAX引擎。 AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP 的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。 3.核心对象—XMLHttpRequest，XMLHttpRequest详解参考 https://www.sodocs.net/doc/d15203579.html,/xmldom/dom_http.asp XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。一、用户名校验服务器返回简单文本数据Ajax实例 1. 页面代码(checkUsername.html) Html代码 1. 2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 3. "https://www.sodocs.net/doc/d15203579.html,/TR/html4/loose.dtd"> 4.<html> 5.<head> 6.<title>用户名校验</title></p><h2>使用AJAX提交Form表单</h2><p>使用AJAX提交Form表单的方法，其中主要的就是ajaxForm()和ajaxSubmit()，ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象，它包含了如下一些属性与值的集合： Options对象的详解： 1.)target 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery 选择器字符串，一个jQuery对象，或者一个DOM元素。默认值：null。 2.)url 重写或者指定表单的'action'属性。默认值：表单的action属性值 3.)type 重写或者指定表单的'method' 属性,"GET"或"POST"。默认值：表单的method属性值（如果没有找到默认为“GET”）。 4.)beforeSubmit 表单提交前被调用的回调函数，该方法通常被提供来运行预提交逻辑或者校验表单数据。如果"beforeSubmit"回调函数返回false，那么表单将不被提交。"beforeSubmit"回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据： [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 默认值：null 5.)success 表单成功提交后调用的回调函数。如果提供"success"回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。默认值：null 6.)dataType 期望服务器的的回应的类型。null、"xml"、"script"或者"json"其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持： 'xml'：如果dataType == 'xml'，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定，将传回responseXML值 'json'：如果dataType == 'json'，服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。 'script'：如果dataType == 'script'，服务器响应将求值成纯文本。默认值：null（服务器返回responseText值） 7.)semantic 布尔标志，表示数据是否必须严格按照语义顺序来进行提交。注意：一般来说，表单已经按照语义顺序来进行了串行化（或序列化），除了type="image"的input 元素。如果你的服务器有严格的语义要求，以及表单中包含有一个type="image"的input元素，就应该将semantic设置为true。</p><h2>jQuery中$.ajax解析xml、json格式数据</h2><p>jQuery中$.ajax解析xml、json格式数据 $.ajax()方法参数详解： url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。注意：这个要访问url必须与js文件在同一个域，否则会报错。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。 async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。 cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息。 data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，jQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。 dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。 json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery 将自动替换后一个“?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。 beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数}</p><h2>PHP jQuery Ajax 提交表单form详解</h2><p>PHP jQuery Ajax Form 表单提交实例解析，包括创建一个表单 html 页面、添加 JQuery 代码、 jquery ajax 表单提交、 jquery ajax 表单验证、反馈信息给用户， php ajax 表单验证，php ajax 提交表单，php ajax form 验证，php ajax 提交 form 。本实例用到 JQuery 类库本身的函数和功能，所有表单信息利用 PHPMailer 类库邮件的形式发送。 1、创建一个表单 html 页面表单部分 html 代码<br>以下为引用内容： <div id="contact_form"> <form name="contact" method="post" action=""> <fieldset> <label for="name" id="name_label">姓名</label> <input type="text" name="name" id="name" size="30" value="" class="text-input" /> <label class="error" for="name" id="name_error">此项必填</label> <label for="email" id="email_label">您的 Email</label> <input type="text" name="email" id="email" size="30" value="" class="text-input" /> <label class="error" for="email" id="email_error">此项必填</label> <label for="phone" id="phone_label">您的联系电话</label> <input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> <label class="error" for="phone" id="phone_error">此项必填</label> <br /> <input type="submit" name="submit" class="button" id="submit_btn" value=" 我要发送" /> </fieldset> </form> </div><br>这里用一个 id 为 contact_form 来包含整个包含信息；这是有意义的，稍后在 JavaScript 与用户交互信息的时候会用到，这里 form 标签的属性里面既包含了 method 和 action ；这个意义其实不大，因为 Javascript 直接操作 DOM ，所以没有这两个属性也是可以的；务必要给用户输入的 input 标签加独立的 id ，这和第二点原理类似。否则，无法看到正常的效果。 2、添加 JQuery 代码这里假设你已经从 JQuery 官方网站上下载了 JQuery 基库，然后上传到了你的 WEB 服务器，并添加到你要使用的网页中。<br><br></p><h2>$.ajax()方法详解</h2><p>$.ajax()方法详解各位读友大家好！你有你的木棉，我有我的文章，为了你的木棉，应读我的文章！若为比翼双飞鸟，定是人间有情人！若读此篇优秀文，必成天上比翼鸟！ $.ajax()方法详解1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如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类型的参数，预</p> <div> <div>相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="7667793"><a href="/topic/7667793/" target="_blank">ajax详解</a></li> </ul> </div> </div> </div> </div> <div class="category"> <h2 class="navname">相关文档</h2> <ul class="lista"> <li><a href="/doc/136126453.html" target="_blank">PHP JQUERY AJAX 提交表单FORM详解</a></li> <li><a href="/doc/712683584.html" target="_blank">JQueryAjax教程讲解</a></li> <li><a href="/doc/aa16856490.html" target="_blank">JION数据格式详解</a></li> <li><a href="/doc/f718998790.html" target="_blank">$.ajax()方法详解</a></li> <li><a href="/doc/338445453.html" target="_blank">Ajax2_使用Ajax发送异步请求</a></li> <li><a href="/doc/9a12980645.html" target="_blank">XMLHttpRequest详解</a></li> <li><a href="/doc/c3539768.html" target="_blank">jQuery中$.ajax解析xml、json格式数据</a></li> <li><a href="/doc/0718042400.html" target="_blank">jQuery Ajax 应用实例解析大全</a></li> <li><a href="/doc/543307963.html" target="_blank">Ajax异步提交表单数据的说明及方法实例</a></li> <li><a href="/doc/a312973846.html" target="_blank">ajax跨域请求</a></li> <li><a href="/doc/ff14287733.html" target="_blank">jQuery-ajax使用详解</a></li> <li><a href="/doc/361639211.html" target="_blank">AJAX(XMLHttpRequest)进行跨域请求方法详解</a></li> <li><a href="/doc/8115459943.html" target="_blank">jQ ajax用户无刷新登录方法详解</a></li> <li><a href="/doc/b712891080.html" target="_blank">使用AJAX提交Form表单</a></li> <li><a href="/doc/055468557.html" target="_blank">ajax与php结合实现用户登录(详解)</a></li> <li><a href="/doc/4a15485002.html" target="_blank">JQuery中$.ajax()方法参数详解</a></li> <li><a href="/doc/a72129311.html" target="_blank">Ajax解析xml</a></li> <li><a href="/doc/e45689692.html" target="_blank">PHP jQuery Ajax 提交表单form详解</a></li> <li><a href="/doc/2010528867.html" target="_blank">jQuery调用AJAX异步操作超清晰教程</a></li> <li><a href="/doc/8e13812311.html" target="_blank">JavaScript、Ajax典藏级学习资料</a></li> </ul> <h2 class="navname">最新文档</h2> <ul class="lista"> <li><a href="/doc/0919509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0d19509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9419184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3c19258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/d619211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/a219240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9e19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8f19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8619195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7819336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7b19336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6a19035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4b19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3d19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2919396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2819396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1219338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/e819066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/b819159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "d45946d133d4b14e852468d1"; </script> <div class="footer"> <p>© 2013-2022 www.sodocs.net  <a href="/sitemap.html">站点地图</a> | <a href="/tousu.html" target="_blank">侵权投诉</a></p> <p><a href="https://beian.miit.gov.cn/">闽ICP备11023808号-8</a>  本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈<script type="text/javascript">tj();</script></p> </div> </div> </body> </html>