您的位置：首页 > 其它

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

2016-11-09 08:26 302 查看

(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;

})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航