」などです。"/> 」などです。">
検索

jquery.form.jsは、ajaxフォーム送信とajaxファイルアップロードをサポートするフォームプラグインで、参照メソッドは「

#この記事の動作環境: Windows7 システム、jquery1.6.2 バージョン、DELL G3 コンピューター

jquery とは。フォーム.js?

jQuery.form.js の使用法

jQuery.form.js は、Ajax フォームの送信と Ajax ファイルのアップロードをサポートするフォーム プラグインです。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.6.2.js"></script>
    <script src="~/Scripts/jQuery.form.js"></script>
</head>
<body>
    <div>
        <form id="ajaxForm" method="post" action="/Home/Index" enctype="multipart/form-data">
            <input type="text" name="name" />
            <input type="text" name="sex" />
            <input type="file" name="file" />
            <button type="submit" id="btnSubmit">提交1</button>
        </form>
        <button id="btnButton" type="button">提交2</button>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#ajaxForm").ajaxForm(function () {
                alert("提交成功1");
            });
            $("#ajaxForm").submit(function () {
                $(this).ajaxSubmit(function () {
                    alert("提交成功1");
                });
                return false;
            });
            $("#btnButton").click(function () {
                $("#ajaxForm").ajaxSubmit(function () {
                    alert("提交成功2");
                });
                return false;
            });
        });
    </script>
</body>
</html>
ajaxForm 必要なイベント リスナーをすべて追加して、フォームの Ajax 送信の準備をします。 ajaxForm はフォームを送信できません。ドキュメントのready関数で、ajaxFormを使用してフォームのajax送信を準備します。 0 または 1 個のパラメータを受け入れます。パラメーターには、コールバック関数またはオプション オブジェクトを指定できます。 $("#formid").ajaxForm();
ajaxSubmit ajax を使用してフォームを送信します。 0 または 1 個のパラメータを受け入れます。パラメーターには、コールバック関数またはオプション オブジェクトを指定できます。

$("#formid").ajaxSubmit();

or

$("#formid").submit(function(){

$(this).ajaxSubmit();

return false;

});

formSerialize フォームをクエリ文字列にシリアル化 (またはシリアル化) します。このメソッドは、name1=value1&name2=value2 の形式で文字列を返します。 None $("#formid").formSerialize();
fieldSerialize のフィールド要素を文字列化します。 form クエリ文字列に行化 (またはシリアル化) します。これは、一部のフォーム フィールドのみをシリアル化 (またはシリアル化) する必要がある場合に便利です。 name=value1&name2=value2 の形式で文字列を返します。 None $("#formid .specialFields").fieldSerialize();
#fieldValue 一致する挿入配列を返します。のフォーム要素値。このメソッドは配列形式でデータを返します。要素値が無効である可能性があると判断された場合、配列は空になります。 None $("#formid :password").fieldValue();
resetForm フォームを復元します初期状態。 None $("#formid").resetForm();
clearForm フォーム要素をクリアします。このメソッドは、すべてのテキスト、パスワード、およびテキストエリアを空にし、select 要素の選択をクリアし、すべてのラジオ ボタンとチェックボックス ボタンを選択されていない状態にリセットします。 None $("#formid").clearForm();
clearFields フィールド要素をクリアします。一部のフォーム要素のみをクリアする必要がある場合に便利です。 None $("#formid .specialFields").clearFields();

Options オブジェクト

両方ajaxForm と ajaxSubmit は、Options オブジェクトを使用して提供できる多数のオプション パラメーターをサポートしています。

var options={
    target : &#39;#output&#39;,    // 把服务器返回的内容放入id为output的元素中
    beforeSubmit : showRequest,    // 提交前的回调函数
    success : showResponse,    // 提交后的回调函数
    // url : url,    //默认是form的action,如果申明,则会覆盖
    // type : type,    // 默认值是form的method("GET" or "POST"),如果声明,则会覆盖
    // dataType : null,    // html(默认)、xml、script、json接受服务器端返回的类型
    // clearForm : true,    // 成功提交后,清除所有表单元素的值
    // resetForm : true,    // 成功提交后,重置所有表单元素的值
    timeout : 3000    // 限制请求的时间,当请求大于3秒后,跳出请求
}
function showRequest(formData, jqForm, options){
    // formData: 数组对象,提交表单时,form插件会以ajax方式自动提交这些数据,格式如[{name:user,value:val},{name:pwd,value:pwd}]
    // jqForm: jQuery对象,封装了表单的元素
    // options: options对象
    var queryString=$.param(formData); // name=1&address=2
    var formElement=jqForm[0]; // 将jqForm转换为DOM对象
    var address=formElement.address.value; // 访问jqForm的DOM元素
    return true; // 只要不返回false,表单都会提交,在这里可以对表单元素进行验证
}
function showResponse(responseText,statusText){
    // dataType=xml
    var name=$("name",responseXML).text();
    var address=$("address",responseXML).text();
    $("#xmlout").html(name+" "+address);
    // dataType=json
    $("#jsonout").html(data.name+" "+data.address);
}
target サーバーに応答して更新されるページ内の要素を示します。要素の値は、j​​Query セレクター文字列、jQuery オブジェクト、または DOM 要素として指定できます。 デフォルト値: null
url フォームデータを送信するための URL を指定します。 デフォルト値: フォームの action 属性値
type フォーム データを送信する方法を指定します: "GET" または "POST" 「。」 デフォルト値: GET
beforeSubmit フォームが送信される前に呼び出されるコールバック関数。コールバック関数が false を返した場合、フォームは送信されません。コールバック関数は、配列形式のフォーム データ、jQuery フォーム オブジェクト、および ajaxForm/ajaxSubmit で渡される Options オブジェクトの 3 つの呼び出しパラメータを取ります。 デフォルト値: null
success フォームが正常に送信された後に呼び出されるコールバック関数。次に、dataType オプションの値によって、responseText の値が返されるか、responseXML の値が返されるかが決まります。 デフォルト値: null
dataType 返されるデータ型: null、「xml」、「script」、「json」のいずれか。 デフォルト値: null
resetForm フォームが正常に送信された場合にリセットするかどうかを示します。 デフォルト値: null
clearForm フォームが正常に送信された場合にフォーム データをクリアするかどうかを示します。
推奨学習: 「

jquery ビデオ チュートリアル

以上がjquery.form.jsとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ReactのSEOに優しい性質:検索エンジンの可視性の向上ReactのSEOに優しい性質:検索エンジンの可視性の向上Apr 26, 2025 am 12:27 AM

はい、Reactapplicationscanbeseo-frendlywithpropertrategies.1)useServer-siderendering(ssr)withtoolslikenext.jstogeneratefullhtmlforindexing.2)explmentStaticSiteSite-generation(SSG)forcontent-heavysitestoprededopRederpageattiTiTeTietLe.3)

Reactのパフォーマンスボトルネック:遅いコンポーネントの識別と最適化Reactのパフォーマンスボトルネック:遅いコンポーネントの識別と最適化Apr 26, 2025 am 12:25 AM

反応性能のボトルネックは、主に非効率的なレンダリング、不必要な再レンダリング、コンポーネントの内部重量の計算によって引き起こされます。 1)ReactDevtoolsを使用して遅いコンポーネントを見つけ、React.Memoの最適化を適用します。 2)EFFECTを最適化して、必要に応じて実行することを確認します。 3)メモリ処理には、usememoとusecallbackを使用します。 4)大きなコンポーネントを小さなコンポーネントに分割します。 5)ビッグデータリストについては、仮想スクロールテクノロジーを使用してレンダリングを最適化します。これらの方法により、Reactアプリケーションのパフォーマンスを大幅に改善できます。

Reactの代替品:他のJavaScriptUIライブラリとフレームワークの探索Reactの代替品:他のJavaScriptUIライブラリとフレームワークの探索Apr 26, 2025 am 12:24 AM

パフォーマンスの問題、学習曲線、またはさまざまなUI開発方法の探索のために、誰かが反応する代替品を探すことができます。 1)Vue.JSは、統合の容易さと軽度の学習曲線で称賛され、小規模および大規模なアプリケーションに適しています。 2)AngularはGoogleによって開発されており、強力なタイプのシステムと依存噴射を備えた大規模なアプリケーションに適しています。 3)Svelteは、ビルド時に効率的なJavaScriptにコンパイルすることにより、優れたパフォーマンスとシンプルさを提供しますが、そのエコシステムはまだ成長しています。代替案を選択するときは、プロジェクトのニーズ、チームエクスペリエンス、プロジェクトの規模に基づいて決定する必要があります。

Keys and Reactの調整アルゴリズム:パフォーマンスの向上Keys and Reactの調整アルゴリズム:パフォーマンスの向上Apr 26, 2025 am 12:21 AM

KeysinReactarespecialattributedignedInedInementionArrays forStableIdentity、重要なもの、curtialforthereconciliationalgorithmはfichupdatedoMedifficly.1)keyshelpreprackChanges、追加、OrRemovalsinlists.2)

Reactプロジェクトに必要なボイラープレートコード:セットアップオーバーヘッドの削減Reactプロジェクトに必要なボイラープレートコード:セットアップオーバーヘッドの削減Apr 26, 2025 am 12:19 AM

toreduceSetUpOverHeadinReactProjects、usetoolslikecreatereActapp(cra)、next.js、gatsby、orstarterkits、およびmaintainAmodularStructur E.1)crasimplifiessetupwithasinglecommand.2)next.jsandgatsbyoffermorefeaturesbutalearningcurve.3)starterkitsprovidecomprehensi

USESTATEの理解():React React Neact State Managementの包括的なガイドUSESTATEの理解():React React Neact State Managementの包括的なガイドApr 25, 2025 am 12:21 AM

usestate()isareacthookusedtomeStateinfunctionalComponents.1)itInitializeSandUpDatestate、2)colledatttheToplevelofComponents、3)canleadto'stalestate'ifnotusedly、and4)cancancancancancanbeoptimizeduptimizeduptimizedususecall -calleSuperesteSteSteSteSteSteSteSteSteStateSupteStateSuptateSuptatedates

Reactを使用することの利点は何ですか?Reactを使用することの利点は何ですか?Apr 25, 2025 am 12:16 AM

ReactisPopularduetoitsComponent Architecture、Virtualdom、Richecosystem、およびdeclarativenature.1)コンポーネントベースのarchitectureallowsforReusable anduipieces、改善様式および測定可能性。

Reactでのデバッグ:一般的な問題の特定と解決Reactでのデバッグ:一般的な問題の特定と解決Apr 25, 2025 am 12:09 AM

debugReactapplicationivivivity、EtheseStrategies:1)AddressPropdrillingWithContextapiorredux.2)HandLeasynchronousoperations withuthutateanduseeffect、Abortcontrollertopreventraceconditions.3)最適化合物を使用して、最適化合物を使用してください

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター