2

I'm creating a registration form. The user enters the username and password, and presses submit, and the form is submitted using POST. HTML :

<link href="Styles/RegisterStyles.css" rel="stylesheet" type="text/css" />
<form id="frmRegister" method="post" action="register.php">
  <h1>Register</h1>
    <table width="100%">
      <tr>
        <td width="16%"><label class="alignRight"> Username: </label></td>
        <td width="84%"><input name="txtUsername" type="text" maxlength="40" /></td>
      </tr>

      <tr>
        <td width="16%"><label class="alignRight"> Password: </label></td>
        <td width="84%"><input name="txtPassword" type="text" maxlength="40" /></td>
      </tr>

      <tr>
        <td width="16%">&nbsp;</td>
        <td width="84%"><input name="Submit" class="submitButton" type="submit" /></td>        
      </tr>

    </table>
</form>
</html>

PHP:

$username = $_POST["txtUsername"];
$password = $_POST["txtPassword"];
//Code to connect to database

function doesUsernameExist($username)
{
    //return true if username exists or false otherwise
}

Now, in PHP, I run a query to check if the username exists in the database. If the username already exists, how can I notify the user without navigating to another page and causing the "username" and "password" fields to be reset to blank?

Some registration forms have a really neat Javascript that checks if the username exists each time you press a key on the keyboard. Any ideas on how this could be implemented? It's difficult ( and bad practice ) to connect to a database using JavaScript from what I can gather.

4

4 に答える 4

3

私はjQueryを使ってこのようなことをしています。

HTMLで

<input type="text" name="username" onBlur="checkUsername(this)">

javascriptではこのようなもの

function checkUsername(v){
    $.post("phppage.php",{
        valToBeChecked:v
    },function(d){
        if($.trim(d)==true){
            // php page returned true
        }else{
            // php page returned false
        }
    });
}

これは単なる例であることに注意してください。構文は正しいと思います。

于 2012-12-05T19:00:42.710 に答える
1

これにより、jQueryを使用せずに入力のぼかしに対してAJAXチェックが実行されます。

編集：私はこのアプローチを提案しないことを明確にしたいので、AJAXにjQuery（または他の同様のJSフレームワーク）を使用することを強く望んでいます。ただし、誰もが使用するテクノロジーを指定できるわけではないことを理解しているので、ここにあなたの要求に対する答えがあります！:)

<input id="txtUsername" name="txtUsername" />
<script type="text/javascript">
    window.onload = function() {
        document.getElementById('txtUsername').onblur = function(e) {
            // Get the username entered
            var el = e.target;
            var username = el.value;

            // Create an XHR
            var xhr = null;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            // AJAX call to the server
            request.open('GET', '/check_username.php?username=' + username, false);
            xhr.onload = function(e) {
                var json = eval(xhr.responseText);
                if (json.exists) {
                   window.alert('That username exists already.');
                }
            }
            xhr.send();
        }
    }
</script>

user_exists.php 

$username = isset($_GET['username']) ? $_GET['username'] : '';
$username = mysqli_real_escape_string($username);

$sql = "SELECT COUNT(*) > 0 AS user_found
        FROM users
        WHERE username = '{$username}'";

$result = mysqli_query($sql);

$exists = false;
if ($row = mysqli_fetch_assoc($result)) {
    $exists = $row['user_found'] ? true : false;
}

echo json_encode(array('exists' => $exists));
于 2012-12-05T19:01:19.537 に答える
1

これに対する私の解決策は、AJAXを利用することです。

フォームを送信したら、フォームに入力されたデータを評価するページにAJAX呼び出しを行い、フォームが検証されたかどうかに関する情報を返します。

そのAJAX呼び出しからいくつかの情報を取得した後、フォームを再度送信するかどうかを決定しますが、今回はデータをデータベースに吸収するページに移動します。

これは1つの解決策です。そして、AJAX初心者として、おそらくもっと良いものがあると思いますが、それはあなたのために働くかもしれません。

于 2012-12-05T18:58:03.350 に答える
0

優れたオプションは、jQuery/AJAXを使用することです。 これらの例を見て、サーバーで試してみてください。この例では、FILE1.phpで、空白の値を渡していることに注意してください。空白の値を渡したくない場合は、ここにユーザー名とパスワードを入力してFILE2.phpに配信します。あなたの場合、行は次のようになります。

data: 'username='+username+'&password='+password,

FILE2.phpの例では、次のようにこれらの値を取得します。

$uname = $_POST['username'];
$pword = $_POST['password'];

次に、MySQLルックアップを実行し、次のように値を返します。

echo 1;

これにより1、FILE1.phpのsuccess関数が配信され、「data」という変数に格納されます。したがって、alert(data);成功関数の行は1番に警告します。

これがレビューするもう1つの良い例です。

アプローチは、フォームを作成し、jQueryを使用してボタンの押下を検出し、AJAXを介してデータをセカンダリPHPファイルに送信することです。上記の例は、その方法を示しています。

セカンダリPHPファイルは応答（送信することを選択したもの）を返し、それはAJAX呼び出しのSuccess：セクションに表示されます。

jQuery / AJAXはjavascriptであるため、2つのオプションがあり<script type="text/javascript"></script>ます。メインのPHPドキュメント内のタグ内に配置するか<?php include "my_javascript_stuff.js"; ?>、PHPドキュメントの下部に配置することができます。

于 2012-12-05T18:57:43.767 に答える