[JQ权威指南]表单插件form
2016-11-08 08:54
204 查看
(1)功能描述:
在页面中创建一个ID为”frmUserInfo”的表单,在表单中新建一个文本框,用于输入用户名。新建一个口令文本框,用于输入密码,单击提交后,将向服务器文件login.aspx发送请求。提交表单中的各元素值,服务器响应请求,将返回的内容显示在ID为”divData”页面元素中。
(2)实现代码:
html:
服务器端文件:Login.aspx
(3)代码分析
在导入form表单插件之后,提交数据变得十分轻松,一行代码:
(“#frmUserInfo”).ajaxForm(options);
等于(“#frmUserInfo”).submit.(function(){
$(“#frmUserInfo”).ajaxSubmit();
return false;
})
在页面中创建一个ID为”frmUserInfo”的表单,在表单中新建一个文本框,用于输入用户名。新建一个口令文本框,用于输入密码,单击提交后,将向服务器文件login.aspx发送请求。提交表单中的各元素值,服务器响应请求,将返回的内容显示在ID为”divData”页面元素中。
(2)实现代码:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>form 表单插件</title> <script src="Jscript/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="Jscript/jquery.form.js" type="text/javascript"></script> <script type="text/javascript" > $(function () { //定义一个表单提交时的对象 var options = { //默认为form中的action,设置后便覆盖默认值 url: "Login.aspx", //将服务器返回的数据显示在ID号为divData的元素中。 target: "#divData" } //以ajax的方式提交表单 $("#frmUserInfo").ajaxForm(options); }) </script> <style type="text/css"> body{font-size:13px} .divFrame{width:225px;border:solid 1px #666} .divFrame .divTitle{padding:5px;background-color:#eee;height:30px} .divFrame .divTitle span{float:left;padding:2px;padding-top:5px} .divFrame .divContent{padding:8px} .divFrame .divContent .clsShow{font-size:14px} .txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px} .btn {border:#666 1px solid;padding:2px;width:65px; </style> </head> <body> <form id="frmUserInfo" method="get" action="#"> <div class="divFrame"> <div class="divTitle"> 用户登录 </div> <div class="divContent"> <div> 用户名:<br /> <input id="username" name="username" type="text" class="txt" /> </div> <div> 密码:<br /> <input id="userpass" name="userpass" type="password" class="txt" /> </div> </div> <div class="divBtn"> <input id="sbtUser" type="submit" value="提交" class="btn" /> </div> <div id="divData"></div> </div> </form> </body> </html>
服务器端文件:Login.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Ch8_Login" ResponseEncoding="gb2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <% string strName = Request["username"]; string strPass = Request["userpass"]; string strRetValue = "用户名:" + strName + "<br>密码:" + strPass; Response.Write(strRetValue); %> </form> </body> </html>
(3)代码分析
在导入form表单插件之后,提交数据变得十分轻松,一行代码:
(“#frmUserInfo”).ajaxForm(options);
等于(“#frmUserInfo”).submit.(function(){
$(“#frmUserInfo”).ajaxSubmit();
return false;
})
相关文章推荐
- [JQ权威指南]表单插件form
- [JQ权威指南]页面遮盖插件LoadMask
- jqTransform form表单美化插件使用方法
- [JQ权威指南]右键菜单插件ContextMenu
- [JQ权威指南]jQuery Pagination分页插件
- [JQ权威指南]Active插件的使用
- [JQ权威指南]validate验证插件
- [JQ权威指南]折叠面板插件accordion
- [JQ权威指南]datepocker插件实现分段时间的选择
- [JQ权威指南]NotesForLightBox插件的使用
- [JQ权威指南]自定义JQuery插件
- [JQ权威指南]类级别插件开发
- [JQ权威指南]搜索插件AutoComplete
- [JQ权威指南]图片放大镜插件jqzoom
- [JQ权威指南]动画表格排序插件TableSort
- jqTransform form表单美化插件使用方法
- [JQ权威指南]对象级别插件的开发
- [JQ权威指南]jQuery上传插件Uploadify使用详解
- 基于Jquery的FormValidator表单验证插件
- [JQ权威指南]移动位置的动画