ホームページ > 記事 > ウェブフロントエンド > ajax を使用して、jQuery.form.js plug-in_javascript スキルを通じて jQuery に基づいてフォームを送信する
ajax を使用して、jQuery.form.js plug-in_javascript スキルを通じて jQuery に基づいてフォームを送信する
- WBOYオリジナル
- 2016-05-16 15:44:521673ブラウズ
フォームを送信するときに、送信に ajax を使用しないと、ページが自動的に更新され、非常に不親切です。そのため、フォームの送信を ajax モードに変更して、ユーザーが自分が At であることを明確に認識できるようにする必要があります。フォームはどの段階で送信されますか?提出は成功しましたか?
jQuery Form プラグインには次の利点があります。
1. 提出前検証をサポートします。
2. 送信後のコールバックをサポートします。
3. AJAX 方式を採用し、優れたユーザー エクスペリエンスを実現します
4. 送信するフォーム ID を指定するだけで、送信パラメータも同時に設定できます。
主な機能:
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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。