码迷,mamicode.com
首页 > Web开发 > 详细

JQuery的AjaxUpdater上传插件

时间:2016-06-06 10:28:01      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:

  JQuery的AjaxUpdater上传插件。

  其实JQuery已经提供了很多基于Ajax的调用方法,那为什么还要做这样一个Ajax插件呢!

  其实目的很简单就是为了调用更方便。m.mlyrx120.com

  这个插件的特点就是允许通过HTML属性描述来进行一个Ajax操作的定义;

  也就是说通过使该插件只要简单的属性描述就能实现Ajax请求和局部更新的功能。

  描述信息分两部分

  第一部分是描述Ajax提交的配置信息ajaxupdater属性:

  属性成员分别明:url提交的路径,updater提交后更新的区域,validator对某个区域下的元素进行验证处理。

  第二部分就是描述提交的数据信息ajaxparams属性:

  参数定义的是成[员名称:成员值],如果成员值用#开头描述即表示获取相关元素值。成员与成员之前通过[;]分隔开。

  整个过程实现除了引入相关脚本文件外,并不需要编写任何脚本。不过实际应用也并不是这么简单,往往要根据完成的结果进行别的处理,这个时候就要引入一个提交完成的回调函数。

  首先做一个小例程来看一下插件基础功能:

  上面HTML描述了两个Ajax请求:

  第一个是描述Button在点击后引发Ajax请求并把请求的内容更新到updater1的DIV中。

  第二个就是页面加载后进行Ajax请求并把请求的内容更新到updater2的DIV中。

  功能似乎很简单调用过程和JQuery具备的Ajax方法差别不大。接下来做个相对复杂又比较常用的Ajax请求,通过HTML属性描述一个基于Ajax的用户注册信息提交的功能(包括数据验证处理)。为了得到验证功能必须把之前做的验证插件引进来。

  相关处理脚本文件引用:

  具本定义的HTML代码:

  用户名

  性别       男   女m.hrbfc120.com

  出生日期

  邮件地址

  ajaxparams="username:#Text1;sex: #Select1;birthdate:#Text2;email:#Text3"

  type="button" value="注册" />

  HTML代码中的每个输入元素都定义了validator属性,它是用于提供给validator.js脚本进行验证处理用的。接下来就是通过属性描述一个Ajax把数据提交并更新的相关元素功能:

  ajaxparams="username:#Text1;sex: #Select1;birthdate:#Text2;email:#Text3"

  type="button" value="注册" />

JQuery的AjaxUpdater上传插件

标签:

原文地址:http://www.cnblogs.com/hljmly/p/5562802.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!