PHP jQuery Ajaxフォーム送信と検証フォームの詳細説明

PHP jQuery Ajax Form 表单提交与验证实例解析，包括创建一个表单 html 页面、添加 JQuery 代码、jquery ajax 表单提交、jquery ajax 表单验证、反馈信息给用户。php ajax 表单验证，php ajax 提交表单，php ajax form 验证，php ajax 提交 form 。

 

本实例用到 JQuery 类库本身的函数和功能，所有表单信息利用 PHPMailer 类库邮件的形式发送。

 

1、创建一个表单 html 页面

 

表单部分 html 代码

 

以下为引用内容：

/***

* php100.com

* 2013-06-28

***/

 

 

 

姓名 

 

此项必填

您的Email 

 

此项必填

您的联系电话 

 

此项必填

 

 

 

 

ここでは、 contact_form の ID は含まれる情報全体を含めるために使用されます。これは意味があり、後で JavaScript がユーザーと対話するときに使用されます。これにはメソッドとアクションの両方が含まれます。 Javascript は DOM を直接操作するため、これら 2 つの属性がなくても問題ありません。これは 2 番目の点と同様に、ユーザーが入力した入力タグに必ず独立した ID を追加してください。そうしないと、通常の効果が得られません。

2. JQuery コードを追加

ここでは、JQuery 公式 Web サイトから JQuery ベース ライブラリをダウンロードし、それを WEB サーバーにアップロードし、使用する Web ページに追加したものとします。

新しい JS ファイルを作成します

以下は引用です:

/***

* php100.com

* 2013-06-28

***/

$(function() {

$(".button").click(function() {

// フォーム検証とバックグラウンド処理のロジックを処理します

});

});

1 行目の function() 関数は、Jquery の document.ready 関数と同じ使用法と機能を持ち、DOM が準備された後に自動的にトリガーされます。行 2 には、クリック トリガー関数 click() が含まれています。2 番目の点から、JQuery がフォームの送信機能をシミュレートするために、「button」という名前のクラスを HTML ページの送信ボタンに配置する必要があることに注意してください。構造とロジックをうまく分離できます。

3. jquery ajax フォーム検証

実際のアプリケーションでは、このステップは不可欠です。ユーザーが項目を見逃したり、間違って入力した場合は、すぐに確認を促します。

以下は引用です:

/***

* php100.com

* 2013-06-28

***/

$(function() {

$('.error').hide();

$(".button").click(function() {

// 認証コード

$('.error').hide();

var name = $("input#name").val();

if (name == "") {

$("ラベル#名前_エラー").show();

$("input#name").focus();

false を返します

}

var email = $("input#email").val();

if (メール == "") {

$("label#email_error").show();

$("input#email").focus();

false を返します

}

varphone = $("input#phone").val();

if (電話 == "") {

$("label#phone_error").show();

$("input#phone").focus();

false を返します

}

});

});

2 行目では、ユーザーが情報を入力しない場合に 3 つの class="error" エラー ラベルを非表示にする $('.error').hide() を追加します。エラーは、エラーが発生した場合、つまり空の場合にのみ表示されます。return false 効果により、一度に発生するエラーは 1 つだけです。

JQuery では、DOM

内の ID またはクラスの値を取得します。

以下は引用です:

/***

* php100.com

* 2013-06-28

***/

//id の値を取得

var name = $("input#name").val();

//クラス番号1の値を取得

var name = $(".name")[1].val();

ユーザーが名前を入力していないと仮定すると、処理ロジックは次のようになります。まずエラーを表示し、次に名前にフォーカスを置きます。

以下は引用です:

/***

* php100.com

* 2013-06-28

***/

if (name == "") { //ユーザー名は空です

$("label#name_error").show(); //エラーメッセージ

$("input#name").focus(); // フォーカス位置

return false; //

を返します。

}

必須フィールドを検証する場合は、 false を返す必要があります。そうでない場合、必須フィールドは入力される前に送信されます。

4. Jquery Ajax 送信フォーム

これは、JavaScript によって DOM から取得されたフォーム項目の値が、バックグラウンド処理プログラム process.php に非同期的に送信され、電子メールが送信されるための中心的なステップです。検証プログラムの直後です:

以下は引用です:

/***

* php100.com

* 2013-06-28

***/

var dataString = 'name='+ 名前 + '&email=' + メールアドレス + '&phone=' + 電話番号;

//alert (dataString);return false;

$.ajax({

タイプ: "POST"、

URL: "bin/process.php"、

データ: dataString、

成功: function() {

$('#contact_form').html("

"); 

$('#message').html("

联系方式已成功提交！

") 

.append("

Script design

") 

.hide() 

.fadeIn(1500, function() { 

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

}); 

} 

}); 

return false;

核心函数是 .ajax() ，它所起得作用就是使用 POST 方式将已经获取的表单信息 dataString 异步传送给所定义的后台 PHP url(bin/process.php) 。如果数据成功传送，它会将一系列我们定义好的信息返回给用户。最后 return false ，这样是为了防止页面重新加载。

 

除了返回成功信息和发送邮件外，我们还可以做其他一些更广泛的事情。比如，将获得的数据交由后台脚本处理时，将数据插入数据库中，然后再将用户提交的信息返回，因为：

 

首先，获取表单项的值：

 

以下为引用内容：

/***

* php100.com

* 2013-06-28

***/

var name = $("input#name").val(); 

var email = $("input#email").val(); 

var phone = $("input#phone").val(); 

//将表单项的值组合成一个字符串 

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; 

将此组合字符串的值通过AJAX 函数传递给后台 url ，如果成功，则会返回成功信息给用户：

 

以下为引用内容：

/***

* php100.com

* 2013-06-28

***/

$.ajax({ 

type: "POST", 

url: "bin/process.php", 

data: dataString, 

success: function() { 

$('#contact_form').html("

"); 

$('#message').html("

Contact Form Submitted!

") 

.append("

We will be in touch soon.

") 

.hide() 

.fadeIn(1500, function() { 

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

}); 

} 

}); 

return false;5、反馈信息给用户

首先，在信息提交成功之后，JQuery 会通过以下部分动态的替换掉

中的内容：

 

以下为引用内容：

/***

* php100.com

* 2013-06-28

***/

$('#contact_form').html("

");

したがって、将来、特定のレイヤーを動的に置き換えたり、JavaScript を使用したりする必要がある場合は、Jquery の .html メソッドを使用してこれを実現できることを覚えておいてください。次に、このレイヤーにはコンテンツがないため、このレイヤーだけでは明らかに十分ではありません。そのため、id=message を使用してレイヤーに表示コンテンツを追加する必要もあります:

以下は引用です:

/***

* php100.com

* 2013-06-28

***/

$('#message').html("

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

")

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

以下は引用です:

/***

* php100.com

* 2013-06-28

***/

.append("

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

")

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

以下は引用です:

/***

* php100.com

* 2013-06-28

***/

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

.fadeIn(1500, function() {//1500 ミリ秒以内に徐々にフェードします

//最後に、成功アイコンを動的に追加します

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

});