2. 程式人生 > >[JQ權威指南]表單外掛form

[JQ權威指南]表單外掛form

阿新 • • 發佈：2019-02-06

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

相關推薦

[JQ權威指南]表單外掛form

(1)功能描述： 在頁面中建立一個ID為”frmUserInfo”的表單，在表單中新建一個文字框，用於輸入使用者名稱。新建一個口令文字框，用於輸入密碼，單擊提交後，將向伺服器檔案login.aspx傳

jquery表單外掛 ---form

jquery Form外掛是一個優秀的Ajax表單外掛，可以非常容易的、無侵入滴升級html表單以支援Ajax。jQUery Form有兩個核心方法——ajaxForm()和ajaxSubmit(),它們集合了從控制表單元素到如何管理提交程序的功能。另外外掛還有一些其它的方法：formToArr

[JQ權威指南]物件級別外掛的開發

(1)功能描述 在列表元素中，滑鼠在表項元素移動時，可以自定義其獲取焦點(focus)時的背景顏色，即設定表項選中的背景色， (2)搭建框架 新建一個JS檔案，命名為jquery.

jq中的表單驗證插件------jquery.validate

此外 郵箱 method 你們 ostc [0 ade 使用 js代碼 今天我們來說一下表單驗證，有人說我們在進行表單驗證的時候使用正則來驗證是非常麻煩的，現在我來給大家介紹一下表單驗證的插件：jquery.validate.min.js 它是與jquery一起結合

表單<form>

inpu use 講解 方式 ext post pos action for <form method="傳送方式" action="服務器文件"> 講解： 1.<form> ：<form>標簽是成對出現的，以<form&g

Spring MVC-表單（Form）標簽-單選按鈕（RadioButton）示例（轉載實踐）

springmvc tro void cnblogs subscribe bin 應用 mat efi 以下內容翻譯自：https://www.tutorialspoint.com/springmvc/springmvc_radiobutton.htm 說明：示例基於Sp

Spring MVC-表單（Form）標簽-下拉框（Dropdown）示例（轉載實踐）

getcount pap number ima mvc框架 ati 讓我 lec 第一個 以下內容翻譯自：https://www.tutorialspoint.com/springmvc/springmvc_dropdown.htm 說明：示例基於Spring MVC 4

Javascript控制回車鍵進行表單（form）提交（轉）

html urn enter text ctype ret put 焦點 cti 一、采用鉤子事件去捕獲 鍵盤事件有3個： keydown，keypress，keyup分別是按下，按著沒上擡，上擡鍵盤 。 $(document).keyup(function(ev

Django使用普通表單、Form、以及modelForm操作數據庫方式總結

信息 自定義字段 turn html 缺點 tin 顯示時間 流程 req Django使用普通表單、Form、以及modelForm操作數據庫主要應用於增刪該查的情景下，流程通用如下，只是實現方式不一樣： 進入填寫表單頁面； 在表單頁面填寫信息，並提交； 表單數

flask框架表單模型Form並新增驗證

異常：ImportError: cannot import name ‘ForkingMixIn’ 示例 （register.html） <!DOCTYPE html> <html lang="en"> <head> <meta

表單 HTML form 標籤

<form></form> <form> 標籤用於建立供使用者輸入的 HTML 表單，通常結合相關表單元素一起使用： <input> <textarea> <button> <select> <op

css實現整個表單只讀 form readonly

原文出處：https://blog.csdn.net/miaoqinian/article/details/81192082 我說的方法只需要給表單加上一個類，就可以讓表單只讀。 <form class="form-readonly"></form>  

Django2.0-表單(1)-Form使用

Django中的表單 Django中的表單豐富了傳統的HTML語言中的表單。在Django中的表單，主要做以下兩件事： 渲染表單模板。(不常用，容易前後端耦合) 表單驗證資料是否合法。 Djang

PHP - 表單（FORM）例項

php 的表單處理往往是php應用的第一個學習單元。學好表單處理，也就開始了PHP實用之旅。先看程式碼和瀏覽結果，然後一一解釋： 第一張圖是HTML檔案，當然也可以直接用.php做字尾，效果是一樣的。我這裡只截取了body的部分。 表單屬於HTML的內容，但和PHP的關聯相當

beego中路由（Router）引數和表單（Form）引數的區別和獲取

在beego中，檢視層有兩種叫做引數的東西，有時候很讓人困惑。它們分別是路由引數和表單引數。 beego的路由對映支援靈活的結構，比如對於這種/blog/:catName可以表示的是某一個分類下的blog列表，那麼這裡的:catName就是路由引數；如果說我們要對這個分

提升使用者體驗的最佳免費 jQuery 表單外掛

網頁表單是一個老生常談的話題。出於這樣或那樣的目的，一些示例中都會包括使用者註冊，電子商務結算，使用者設定甚至聯絡人表格。而輸入欄是非常容易用現代的CSS3技術來應用樣式。但是到底什麼決定整體使用者體驗？ 在這篇文章中，我想展示一些免費的開源jQuery外掛來幫助開發者建立更簡易的web表單。訪問者不用太多的

Django中的表單(forms.Form)

Django中的表單： 1、HTML中的表單：用來提交資料給伺服器的,不管後臺的伺服器用的是Django還是PHP語言還是其他語言 2、Django中的表單： ①渲染表單模板 ②表單驗證資料是否合法 3、Django中表單使用流程： ①app下新建fo

[JQ權威指南]第十八天：使用show()與hide()方法動畫顯示和隱藏圖片

(1)功能描述 在頁面中單擊“顯示”連線，通過show()方法以動畫的方式顯示一幅圖片，同時在方法中執行一個回撥函式，用於改變圖片的邊框樣式；單擊已顯示的圖片時，通過hide()以動畫的方式隱藏該圖

通過jquery dialog為什麼提交不了form表單 和 $("#Form").ajaxSubmit(options) is not a function 的原因

1.jquery dialog為什麼提交不了form表單  $("#dialog").dialog({                 autoOpen: false,                 height: 500,                 width:

Ember.js 入門指南——表單元素

Ember提供的表單元素都是經過封裝的，封裝成了view元件。經過解析渲染之後就會生成普通的HTML標籤。更多詳細資訊你可以檢視他們的實現原始碼：Ember.TextField、Ember.Chechbox、Ember.TextArea。        按照慣例，先建