2

これは ajax にユーザーの存在をチェックさせるためのフォームです。

<!DOCTYPE html>

<html>
    <head><title>Register new user!</title>
    <script src="jquery-1.7.1.min.js"></script>
    </head>
    <body>
        Username:
        <input type="text" name="username" id="username"/><span id="user"></span><br/>
        Password:
        <input type="password" name="password" id="password"/><br/>
        <input type="button" value="Register" name="submit" id="submit" onclick="register_user();"/>
    </body>
    <script>
        function register_user()
        {
            $.ajax(
                {
                    type:"POST",
                    data:username,
                    url:"userexists.php"                    
                })
            .fail(function()
                  {
                    $('#user').html("This user already exists");
                  }
            );                
        }
    </script>
</html>

そして、ここに userexists.php モジュールがあります

<?php
    // connection to the db
    define(IPHOST,"localhost");
    define(DBPASSWORD,"");
    define(DBUSER,"root");
    define(DATABASE,"ajaxtest");
    define(TABLENAME,"at");

    $conn=mysql_connect(IPHOST,DBUSER,DBPASSWORD) or die(mysql_error());
    mysql_select_db(DATABASE) or die(mysql_error());
    $username=$_POST('username');
    $sql="SELECT username FROM ".TABLENAME." WHERE username=".$username;
    $query=mysql_query($sql);
    if(0!=mysql_numrows($query))
    {
        //
    }
    else
    {

    }
?>

しかし、私は ajax 関数が実際にどのように機能するかを本当に理解するのに行き詰まっています。たとえば、入力したユーザー名が使用されていることを知った後、空白のフィールドに何を入力すればよいでしょうか? ajax がまったくわかりません。

[更新] ありがとうございます。理解しました。複数の回答がありましたが、どれを最適な回答として選択すればよいかわかりません。すべてを選択するオプションはありません。

4

4 に答える 4

3

コードに多くの間違いがあります。以下のコードを試してください。

<!DOCTYPE html>

<html>
    <head><title>Register new user!</title>
    <script src="jquery-1.7.1.min.js"></script>
    </head>
    <body>
        Username:
        <input type="text" name="username" id="username"/><span id="user"></span><br/>
        Password:
        <input type="password" name="password" id="password"/><br/>
        <input type="button" value="Register" name="submit" id="submit" onclick="register_user();"/>
    </body>
    <script>
        function register_user()
        {
            $.ajax({
                type: "POST",
                data: {
                    username: $('#username').val(),
                },
                url: "userexists.php",
                success: function(data)
                {
                    if(data === 'USER_EXISTS')
                    {
                        $('#user')
                            .css('color', 'red')
                            .html("This user already exists!");
                    }
                    else if(data === 'USER_AVAILABLE')
                    {
                        $('#user')
                            .css('color', 'green')
                            .html("User available.");
                    }
                }
            })              
        }
    </script>
</html>

そしてあなたのphpコードのために：

<?php
    // connection to the db
    define(IPHOST,"localhost");
    define(DBPASSWORD,"");
    define(DBUSER,"root");
    define(DATABASE,"ajaxtest");
    define(TABLENAME,"at");

    $conn=mysql_connect(IPHOST,DBUSER,DBPASSWORD) or die(mysql_error());
    mysql_select_db(DATABASE) or die(mysql_error());

    $username = mysql_real_escape_string($_POST['username']); // $_POST is an array (not a function)
    // mysql_real_escape_string is to prevent sql injection

    $sql = "SELECT username FROM ".TABLENAME." WHERE username='".$username."'"; // Username must enclosed in two quotations

    $query = mysql_query($sql);

    if(mysql_num_rows($query) == 0)
    {
        echo('USER_AVAILABLE');
    }
    else
    {
        echo('USER_EXISTS');
    }
?>
于 2012-04-28T10:06:02.027 に答える
3

あなたは AJAX に慣れていないので、いくつかの説明を行って、少しでも役に立ちたいと思います。

AJAX は Asynchronous Javascript And XML の略です。これを使用すると、別のページにリクエストを送信し、元のページが別のページから返された結果に応じて異なる動作をするようにすることができます。

では、これはどのように役立つのでしょうか? 良い; 「ユーザー名」フィールドでも onblur を設定して、リモート スクリプトをチェックして、ユーザー名が既に使用されているかどうかを確認できます。(これは、現在のセットアップで既に行っていることです。よくできました!)

まず; .fail() は、現在のページに「ajax リクエストが失敗した場合は、このコードを実行してみましょう」と伝えています。これをコールバックと呼びます。コールバックは、非同期リクエストが終了したときに実行する JavaScript コードの関数です。

したがって、実際にやりたいことは .done() メソッドを使用することです。これにより、jQuery リクエストに「ねえ、このリクエストの実行が完了したら、このコードのチャンクを実行してください。その間、私はここに座って、発生した他のすべてを処理します」と伝えます。

したがって、.done() と .fail() の使用にはわずかな違いがあることがわかりますが、.fail() が初めての ajax であると混同しやすいことがわかります。

それでは、現在の問題に戻りましょう。ajax を次のように変更します。

$("#submit").click(function()
{
    $.ajax({
      type: "POST",
      data: "username="+$("#username").val(),
      url: "userexists.php"                    
    })
    .done(function(response){
        $('#user').html(response);
    });
});

これが行うことは、送信ボタンの onclick ハンドラーを ID "submit" にバインドすることです。これで、onclick="register_user" を削除できます。次に、「ウェブページよ、userexists.php に、パラメーター名 username を含むユーザー名テキストボックスの値を送信してください。そのリクエストが終了したら、#user の html をレスポンスに設定します。

それで、それは行き、それをします。

これで、PHP ファイルで次のことができます。

<?php
    // connection to the db
    define(IPHOST,"localhost");
    define(DBPASSWORD,"");
    define(DBUSER,"root");
    define(DATABASE,"ajaxtest");
    define(TABLENAME,"at");

    $conn = mysql_connect(IPHOST,DBUSER,DBPASSWORD) or die(mysql_error());
    mysql_select_db(DATABASE) or die(mysql_error());

    $username = mysql_real_escape_string($_POST['username']); // Stop some MySQL injections

    $sql="SELECT username FROM ".TABLENAME." WHERE username='$username'";
    $query=mysql_query($sql);
    if(mysql_numrows($query) == 0)
    {
        echo 'Username is available!'
    }
    else
    {
        echo 'Sorry, username is in use.';
    }
?>

したがって、スクリプトがクエリを実行すると、結果が見つかった場合、HTML div に "Username is available!" と表示されます。それ以外の場合、一致が見つかった場合は、「申し訳ありませんが、ユーザー名は利用できません」と表示されます。

これが ajax の理解に少しでも役立つことを願っています。

于 2012-04-28T10:10:07.463 に答える
0

技術的にはあなた次第です。(例) 「ユーザーが存在する」場合は「1」、「ユーザーが存在しない」場合は「0」を返すか、より詳細な XML を返すことができます。クライアント アプリ (Javascript) は、返された結果を読み取り、適切なメッセージをユーザーに出力します。

.fail メソッドは、関数が実際に失敗した場合 (サーバー側のエラーなど) に使用する必要があります。したがって、あなたがやろうとしていることには適切ではないようです。上記のように、「.done()」コードに戻り値のテストを入れて、正しいメッセージを出力します。

Javascript:

.done(function ( data ) {
  if(data == "0")
    alert("Your username is OK");
  else
    alert("Your username is already used");
});

PHP:

if(0!=mysql_numrows($query))
{
    echo "0";
}
else
{
    echo "1";
}
于 2012-04-28T10:04:52.523 に答える
0

サーバーが予期しないデータを返す場合、ajax の関数 .fail が使用されます。しかし、あなたのphpコードは何も返しません。次のようなものを使用します。

function register_user()
    {
        $.ajax(
            {
                type:"POST",
                data:username,
                url:"userexists.php"                    
            })
        .done(function(_return)
              {
                if(_return)                                                                                                                                                               
                {
                   if(_return['status']=='yes')
                   {
                     $('#user').html(_return['msg']);
                   }
                 }
              })
        .fail(function());                
    }

そしてphpで：

if(0!=mysql_numrows($query))
{
      $return = array('status'=>'yes',
                      'msg'=>"User alredy exist");

      echo json_encode($return);
      return true;
}

これで、多くのステータスを持つ条件を追加して、javascript で解析できるようになりました。

于 2012-04-28T10:05:09.917 に答える