JQuery は PHP AJAX フォーム送信を作成します。-jsチュートリアル-php.cn

JQuery の基本的な構文に慣れていない場合は、このサイトのチュートリアルリソースを検索してください。 PHPMailer の使用法に詳しくない場合は、このサイトの別の記事「PHPMailer クラスライブラリを使用して電子メールを送信する」を参照してください。
最初のステップは、フォーム HTML ページを作成することです
ここでは、HTML 構造コードのメインフォーム部分のみを示します:

コードは次のとおりです:

<div id="contact_form"> 
<form name="contact" method="post" action=""> 
<fieldset> 
<label for="name" id="name_label">姓名</label> 
<input type="text" name="name" id="name" size="30" value="" class="text-input" /> 
<label class="error" for="name" id="name_error">此项必填</label> 
<label for="email" id="email_label">您的Email</label> 
<input type="text" name="email" id="email" size="30" value="" class="text-input" /> 
<label class="error" for="email" id="email_error">此项必填</label> 
<label for="phone" id="phone_label">您的联系电话</label> 
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> 
<label class="error" for="phone" id="phone_error">此项必填</label> 
<br /> 
<input type="submit" name="submit" class="button" id="submit_btn" value="我要发送" /> 
</fieldset> 
</form> 
</div>

ログイン後にコピー

いくつかの注意:
ここでは、含まれる情報全体を含めるために contact_form が使用されています。これは意味があり、後で JavaScript がユーザーと対話するときに使用されます。
ここでの form タグの属性にはメソッドとアクションの両方が含まれていることに誰もが気づいているはずです。JavaScript は DOM を直接操作するため、これら 2 つの属性はなくても問題ありません。
必ず指定してください。ユーザー input タグには独立した ID が追加されます。これは 2 番目の原則と同様です。そうしないと、正常な効果が得られません。
2 番目のステップは、JQuery コードの追加を開始することです。
JQuery 公式 Web サイトから JQuery ベースライブラリをダウンロードし、それを WEB サーバーにアップロードして、目的の Web ページに追加したことを前提としています。使用。
ここで、新しい JS ファイルを作成し、次のコードを追加します:

コードをコピーしますコードは次のとおりです:

$(function( ) {
$(".button").click(function() {
// フォーム検証とバックグラウンド処理のロジックを処理します
});
});

最初の行の function() 関数は、Jquery の document.ready 関数と同じ使用方法と機能を持ち、DOM が準備された後に自動的にトリガーされます。
2 行目には、クリックトリガー関数 click() が含まれています。
からのフォームの送信機能をシミュレートするには、「button」という名前のクラスを HTML ページの送信ボタンに配置する必要があることに注意してください。 2 番目のポイントは、JQuery が構造とロジックを非常にうまく分離できることがわかります。
3 番目のステップは、検証コードを記述することです。
実際のアプリケーションでは、このステップは不可欠です。ユーザーが項目を見逃したり、間違って入力した場合は、すぐに確認を促します。

コードをコピーコードは次のとおりです。

$(function() {
$('.error' ).hide ();
$(".button").click(function() {
// 検証コード

$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show(); "input# name").focus();
return
}
var email = $("input#email").val(); ) {
$("label#email_error").show();
$("input#email").focus();
return false;
varphone = $(" input#phone").val();
if (phone == "") {
$("label#phone_error").show(); ").focus();
return false;
}
});
});

いくつかの注意事項:
2 行目に $ を追加します。 ('.error').hide() は、ユーザーが情報を入力しなかった場合にエラーを促す class="error" を含む 3 つのラベルを非表示にします。そして、エラーは、エラーがある場合、つまり空の場合にのみ表示されます。 (return falseの機能のため、毎回エラーは1つだけ発生します)
JQueryではDOM内のIDやClassの値を取得するのは非常に簡単です

コードをコピーします

コードは次のとおりです: //id の値を取得しますvar name = $("input#name").val() ; //クラス番号 A の値を取得します 1

var name = $(".name")[1].val(); ここで、ユーザーが名前を入力しないと仮定します。処理ロジックは次のようにする必要があります。まずエラーを表示し、次に上位の名前にフォーカスを置きます。

if (name == "") { //ユーザー名が空です
$("label#name_error").show() //エラーメッセージ
$("input#name"); . focus(); //フォーカス位置
return false; //Return
}

必須フィールドを検証する場合は、false を返す必要があります。そうしないと、必須フィールドは不完全になります。提出の場合。
4 番目のステップは、Jquery の Ajax 関数を通じてフォーム情報を送信することです。
これは、JavaScript によって DOM から取得されたフォーム項目の値が、ajax 関数を通じて送信され、バックグラウンド処理プログラム (process.php) に非同期的に送信されます。そしてメールが送信されます。このステップは検証プロセスの直後です:

コードをコピー

コードは次のとおりです:

var dataString = 'name= ' 名前 ' &email=' メール '&phone=' 電話; //alert (dataString);return false; $.ajax({ type: "POST",

url: "bin /process.php",

data: dataString,
success: function() {
$('#contact_form').html("

");
$( '#メッセージ ').html("

連絡先情報が正常に送信されました。

")
.append("

Code52.net によるスクリプト

")
.hide()
.fadeIn(1500, function () {
$('#message').append(" JQuery は PHP AJAX フォーム送信を作成します。 ");
}
});コードコア関数は .ajax() で、その機能は、取得したフォーム情報 (dataString) を POST メソッドを使用して、データが正常に送信された場合に、定義されたバックグラウンド PHP URL (bin/process.php) に送信することです。定義した一連のメッセージはユーザーに返され、最終的には false が返されます。これは、成功メッセージを返したり電子メールを送信したりすることを防ぐためです。取得したデータをバックグラウンドスクリプトで処理すると、データがデータベースに挿入され、ユーザーが送信した情報が返されます。
詳細説明:
まず、フォームの値を取得します。これは 3 番目のステップですでに実行済みです:
var name = $("input#name").val();
var email = $("input#email") ();
var Phone = $("input#phone").val();
//フォーム項目の値を文字列に結合します
var dataString = 'name=' name '&email=' email '&phone=' Telephone;
この結合された文字列の値は、AJAX 関数を通じてバックグラウンド URL に渡されます:

コードをコピーします

コードは次のとおりです: $.ajax({ type: "POST", url: "bin/ process.php",

data: dataString,

success: function() {
$('#contact_form').html("

");
$(' #message').html("

お問い合わせフォームを送信しました !

.append("

すぐにご連絡させていただきます。

.hide()

.fadeIn( 1500, function() {

$('#message').append("

");
});
}
}); JQuery は PHP AJAX フォーム送信を作成します。 return false;
この例では、これが ajax 関数の唯一の関数です。ajax 関数の詳細については、公式ドキュメントを参照してください。 ajax 関数に関する jQuery のドキュメント
ステップ 5、ユーザーへの情報のフィードバック
まず、情報が正常に送信された後、JQuery は次の部分を通じて

のコンテンツを動的に置き換えます。簡単な文だけで達成できます。
$('#contact_form').html("

");

今後 JavaScript を通じて特定のレイヤーを動的に置き換える必要がある場合は、 Jquery を使用できることを覚えておいてください。 html メソッドの実装、非常にシンプルで便利です。
第二に、このレイヤーにはコンテンツがないため、それだけでは明らかに十分ではありません。そのため、id=message を使用してレイヤーに表示コンテンツを追加する必要もあります:

$('#message').html ("

連絡先情報が正常に送信されました!

")

メッセージの ID を持つレイヤーに HTML の部分も動的に追加されます。 append メソッドを使用してメッセージレイヤーに文を追加することもできます:

.append("

すぐにご連絡いたします。

")

最後に、送信後のサーバー処理の動的な効果を示すために、次の特殊効果コードを設定します:

.hide() //レイヤー全体が消える

.fadeIn(1500, function() {//徐々に1500 ミリ秒以内に表示されます

/ /最後に成功アイコンを動的に追加します
$('#message').append("
")
});この例を実際に適用するには、おそらくまだいくつかの変更を加える必要があります。たとえば、検証情報ルールを追加したり、ユーザーが情報を送信するときに読み込みアイコンを設定したりできます。このチュートリアルは、アイデアを紹介するためにのみ使用されます。また、データはバックグラウンドでメールボックスに送信されることに注意してください。これについてはここでは説明しません。パッケージ化されたダウンロードサンプルには非常に詳細なコメントが記載されています。変更する必要があるのはユーザー名とパスワードだけです。圧縮パッケージをダウンロードすると、中に runonload.js ファイルがあることがわかります。このファイルの機能は、フォームファイルをロードするときに入力フォームに焦点を当てることです。