[JQ权威指南]表单插件form

来源：互联网发布：杭州seo博客编辑：程序博客网时间：2024/05/22 02:22

(1)功能描述：
在页面中创建一个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;
})

0 0