[JQ権威ガイド]フォームプラグインform
12581 ワード
(1)機能説明:ページに「frmUserInfo」というIDのフォームを作成し、フォームにユーザー名を入力するテキストボックスを新規作成します.パスワードを入力するパスワードテキストボックスを新規作成し、「≪発行｜Submit｜ldap≫」をクリックすると、サーバー・ファイルloginに向かいます.aspxはリクエストを送信します.フォーム内の各要素の値をコミットし、サーバは要求に応答し、返された内容を「divData」ページ要素に表示します.(2)実装コード:html:
サーバー側ファイル:Login.aspx
(3)コード解析formフォームプラグインをインポートすると、データのコミットが容易になり、1行のコード:("#frmUserInfo").ajaxForm(options);等しい("#frmUserInfo").submit.(function(){ $(“#frmUserInfo”).ajaxSubmit(); return false; })
<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
"C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Ch8_Login" ResponseEncoding="gb2312"%>
<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 + "
:" + strPass;
Response.Write(strRetValue);
%>
form>
body>
html>
(3)コード解析formフォームプラグインをインポートすると、データのコミットが容易になり、1行のコード:("#frmUserInfo").ajaxForm(options);等しい("#frmUserInfo").submit.(function(){ $(“#frmUserInfo”).ajaxSubmit(); return false; })