ajax を使用して、jQuery.form.js plug-in_javascript スキルを通じて jQuery に基づいてフォームを送信する-jsチュートリアル-php.cn

ajax を使用して、jQuery.form.js plug-in_javascript スキルを通じて jQuery に基づいてフォームを送信する

WBOY

リリース： 2016-05-16 15:44:52

オリジナル

1706 人が閲覧しました

フォームを送信するときに、送信に ajax を使用しないと、ページが自動的に更新され、非常に不親切です。そのため、フォームの送信を ajax モードに変更して、ユーザーが自分が At であることを明確に認識できるようにする必要があります。フォームはどの段階で送信されますか?提出は成功しましたか?

jQuery Form プラグインには次の利点があります。

1. 提出前検証をサポートします。

2. 送信後のコールバックをサポートします。

3. AJAX 方式を採用し、優れたユーザーエクスペリエンスを実現します

4. 送信するフォーム ID を指定するだけで、送信パラメータも同時に設定できます。

5. XML、json などの複数のタイプのデータの送信をサポートします。

主な機能:

1.ajaxForm

必要なイベントリスナーをすべて追加して、AJAX 送信用のフォームを準備します。 ajaxForm はフォームを送信できません。ドキュメントの Ready 関数で、ajaxForm を使用してフォームの AJAX 送信を準備します。 ajaxForm は 0 または 1 個のパラメータを受け入れます。この 1 つのパラメータは、コールバック関数または Options オブジェクトのいずれかになります。

例:

$('#myFormId').ajaxForm();

ログイン後にコピー

2.ajax送信

フォームは AJAX 経由ですぐに送信されます。ほとんどの場合、フォームを送信するユーザーに応答するために ajaxSubmit が呼び出されます。 ajaxSubmit は 0 または 1 個のパラメータを受け入れます。この 1 つのパラメータは、コールバック関数または Options オブジェクトのいずれかになります。

例:

// 绑定表单提交事件处理器
$('#myFormId').submit(function() {
// 提交表单
$(this).ajaxSubmit();
// 为了防止普通浏览器进行表单提交和产生页面导航（<span style="color: #333333;"><a href="http://www.100sucai.com/web/jquerytexiao/huandengpian" target="_blank"><span style="color: #333333;">防止页面刷新</span></a></span>？）返回false
return false;
});

ログイン後にコピー

3.formSerialize

フォームをクエリ文字列にシリアル化 (またはシリアル化) します。このメソッドは、name1=value1&name2=value2 の形式で文字列を返します。このメソッドは文字列を返します。

例:

var queryString = $('#myFormId').formSerialize();
// 现在可以使用$.get、$.post、$.ajax等来提交数据
$.post('myscript.php', queryString);

ログイン後にコピー

4.fieldSerialize

フォームのフィールド要素をクエリ文字列にシリアル化 (またはシリアル化) します。これは、一部のフォームフィールドのみをシリアル化 (またはシリアル化) する必要がある場合に便利です。このメソッドは、name1=value1&name2=value2 の形式で文字列を返します。このメソッドは文字列を返します。

例:

var queryString = $('#myFormId .specialFields').fieldSerialize();

ログイン後にコピー

5.fieldValue

挿入された配列と一致するフォーム要素の値を返します。バージョン 0.91 以降、このメソッドは常にデータを配列として返します。要素値が無効である可能性があると判断された場合、配列は空になります。それ以外の場合、配列には 1 つ以上の要素値が含まれます。このメソッドは配列を返します。

例:

// 取得密码输入值
var value = $('#myFormId :password').fieldValue(); 
alert('The password is: ' + value[0]);

ログイン後にコピー

6.リセットフォーム

フォーム要素の元の DOM メソッドを呼び出して、フォームを初期状態に戻します。

例:

$('#myFormId').resetForm();

ログイン後にコピー

7.clearForm

フォーム要素をクリアします。このメソッドは、すべてのテキスト入力フィールド、パスワード入力フィールド、テキストエリアフィールドをクリアし、すべての選択要素の選択をクリアし、すべてのラジオボタンと複数選択 (チェックボックス) ボタンを非選択状態にリセットします。

例:

$('#myFormId').clearForm();

ログイン後にコピー

8.clearFields

フィールド要素をクリアします。一部のフォーム要素をクリアする必要がある場合にのみ使用すると便利です。

例:

$('#myFormId .specialFields').clearFields();

ログイン後にコピー

jQuery Form プラグインの簡単な例:

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>My Jquery</title>
  <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery.form.js"></script>
  <script type="text/javascript"> 
  // wait for the DOM to be loaded
    $(document).ready(function() { 
     // bind 'myForm' and provide a simple callback function
      $('#myForm').ajaxForm(function() { 
        alert("Thank you for your comment!"); 
      }); 
    }); 
    // attach handler to form's submit event 
    $('#myFormId').submit(function() {   
     // submit the form   
     $(this).ajaxSubmit();   
     // return false to prevent normal browser submit and page navigation   
     return false; 
    });
  </script>
</head>
<body>
  <form id="myForm" action="index.jsp" method="post">
  Name: <input type="text" name="name" />
  Comment:<textarea name="comment"></textarea>
  <input type="submit" value="Submit Comment" />
  </form>
</body>
</html>

ログイン後にコピー

この記事では、jQuery が ajax を使用して jQuery.form.js プラグインを通じてフォームを送信する方法を詳しく紹介します。気に入っていただければ幸いです。