AJAXを動作中のPHPフォームに追加する

Question

PHP入力フォームが$_POST[]の入力を確認する作業中です。

• ユーザー名の長さ（3-20）
• ユーザーネーム可用性
• ユーザー名/^[A-ZA-Z0-9 _] + $/
• 等

ではなく持っていますエラーを表示するためにまったく新しいページが表示されます。register.phpからのエラーを呼び出すためのライブリクエストが必要になり、登録時にdivに表示されます。

<div id="errors">" . $usernameErrors . "</div> 

私はAJAXをよく読んしようとしてきたが、ほとんどのコードは$ _GET []を利用伴う気づきました。 現在のフォームをAJAXと統合するにはどうすればよいですか？

私の現在の基本的な登録フォームロジック：

<form method="post" action="register.php"> 
    <input type="text" name="username" id="username" required /> 
    $usernameErrors 
</form> 

そしてregister.phpはすでにチェックがすべて含まれています。

Answer 1

jQueryを使用している場合は、かなり簡単です。

<script type='text/javascript'> 

    $.post('/register.php', 
      {username: $('#username').val() 
      // insert values of other fields here 
      }, 
      function(response) { 
       // update your div with errors 
       $('#errors').html(response); 
      }) 

</script>   

たとえば、ユーザーがユーザー名を登録フォームに変更した場合など、このコードを呼び出す必要があります。バックグラウンドで発生し、非同期的にページを更新します。

この場合、register.phpスクリプトはページ全体ではなくエラーのみを表示するか、予期しない結果が表示されます。 :-)

Answer 2

ajaxを単純化するために、jQuery（非常に強力なJSライブラリ）を使用できます。 。 は、プロジェクトに*** jsのをjqueryのを追加し、あなたのページにそれを参照してください。

<< script type="text/javascript" src="#js/jquery-ui-1.8.16.custom.min.js" /> 

その後、あなたはAJAX呼び出しを行いますJavaScript関数を作成します。 ajax呼び出しでは、呼び出すphpファイルとphp（コールバック）の戻り値を処理する関数を指定します。このコールバック関数では、本文にエラーメッセージを追加します。

function verifyForm(){ 
$.ajax({ 
    type: "POST", 
    url: "register.php", 
    data: "username=NAME_GOT_FROM_FORM_&location=Boston" 
}).done(function(returned) { //the callback 
    $('#errors').html(returned); // add the string returned to div id=errors 
}); 
} 

Answer 3

だから、あなたがそれを求めているような問題の核心は、あなたが（正確に）あなたの登録フォームのPOSTリクエストを使用していることのようですが、あなたのチュートリアルすべてがGETを使用します。ここでは、2つの方法の違いについての議論があります：

http://thinkvitamin.com/code/the-definitive-guide-to-get-vs-post/

あなたはPOSTとしてAJAXリクエストを提出する必要があり、実際にAJAXを持つユーザを登録する（だけではなく、検証）している場合。 jQueryを使用している場合、その答えはすでに与えられています。 jQueryを使用していない場合は、チュートリアルでXMLHttpRequestオブジェクトを探し、 "open"メソッドが呼び出された場所（ここではhttp://www.w3.org/TR/XMLHttpRequest/）を探します。その関数の最初のパラメータはリクエストメソッドです - "get"ではなく "post"に変更し、リクエストはPOSTのように扱われます。これはregister.phpが想定しています。

これは、AJAXにののフォームを有効にしたいと思うと言われています。その場合、GETは正しい動詞です.AJAXでやりたいことは、データを実際に変更するのではなく、データベースに対してチェックすることだけです。 validate_registration.phpのような新しいPHPスクリプトを書くことをお勧めします。これはregister.phpで検証ロジックだけを実行し、JSON配列のエラーを返します（エラーが発生しなければ空になります）。その戻り値に基づいてフォーム送信ボタンをアクティブ/非アクティブにし、すべてが問題ない場合は、以前のワークフローと同じようにフォームを送信させることができます。

ここでは、$ _GETと$ _POSTを異なるものに読み替えて、AJAX固有の検証スクリプトを作成して、プロセスのデータ取得部分をデータ挿入部。違いを理解したら、残りの部分に従ってください。