1

I'm currently trying to create a dynamic registration page. By dynamic, I simply mean that the username and email that is entered will be checked against the DB to see if they exist. I want to do this without redirecting to another page and so ajax with jquery is my best shot.

My system works as such;

  • Query is performed to check for existence of identical username
  • Similar query is performed to check for existence of identical email address
  • If username exists, the string ERROR_USER_EXISTS is returned
  • If email exists, the string ERROR_EMAIL_EXISTS is returned
  • If neither exist, the string USER_ADD_SUCCESS is returned, and registration is done
  • Regardless of the status returned, it will be returned in an array, and if registration is successful, there will be additional data returned within the array alongside the status message

I'm looking at this example answer by 'ClickUpvote' and trying to expand, but I'm having a little trouble. On my registration page, I've got a form, and for the sake of simplicity, I've replaced the 'submit' button with the link provided in that answer. This is the simple expansion I made to the script;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
    function makeAjaxRequest()
    {
       var url="./DoRegister.php";
       $.get(url,{},verifyDb);
    }

    function verifyDb(response)
    {
        if (response=="ERROR_EMAIL_EXISTS")
        {
            document.write('Email in use');
        }
        else if (response=="ERROR_USER_EXISTS")
        {
            document.write('Username in use');  
        }

        else if (response=="USER_ADD_SUCCESS")
        {
          document.write('Registration success');   
        }
    }
</script>
<?PHP
    echo '<form class="" method="post" action="./DoRegister.php">';
    echo '<div>'.EditBox('username','Username', False, True, True).'</div>';
    echo '<div>'.EditBox('password','Password', True, False, True) .'</div>';
    echo '<div>'.EditBox('email','Email Address', False, False, True, 'email') .'</div>';
    echo '<a href="#" onclick="makeAjaxRequest();">Check database</a>';
    echo '</form>';
    echo '</div></div>';
?>

NOTE: EditBox() simply returns a HTML input box preformatted according to the parameters supplied to it. It simply makes the code easier to maintain for me.

The file DoRegister is in the same directory as the one this script is running in, and goes like this;

<?PHP
    define("base_path", dirname(__FILE__).'/');
    include base_path.'/core/CMS_Functions.php';            
    $_pagearray = _registerUser($_POST['username'],$_POST['password'],$_POST['email']);

    if($_pagearray['msg'] == 'ERROR_EMAIL_EXISTS'){
        $msg = 'That email address is already in use. Please enter another.';
    }

    if($_pagearray['msg'] == 'ERROR_USER_EXISTS'){
        $msg = 'That username is already in use. Please enter another.';
    }

    if($_pagearray['msg'] == 'USER_ADD_SUCCESS'){
        $msg = 'Thankyou for registering <strong>'.$_pagearray['username'].'</strong>!<br>'.'Please click the activation link sent to your email address in order to activate your account.';
    }
    return $msg;
?>

NOTE: _registerUser() simply accepts the 3 parameters needed to register an account, and returns one of the aforementioned status strings. The parameters it accepts DO NOT need to be from POST.

My issue is that when I click on the link after entering details into the field, 'nothing happens'. I imagine that it's down to the form not actually being submitted through POST and so DoRegister never actually sees the values. This is the first time I've ever been into javascript, ajax, or jquery so it's not something I feel I can fix on my own (I tend to find that all languages I've learnt over the past few years have started off with something as simple as this though).

How can I expand/fix the script so that I can perform the 'dynamic' lookup?

4

1 回答 1

2

您需要获取要在 javascript 中发送的帖子数据，

javascript不是我的专业领域，但让我们看看我能不能做到这一点......

$("#yourForm").submit(function() {
    $.ajax({
        type: "POST",
        url: "DoRegister.php",
        data: "name=" + $("#name").val() + "&mail=" + $("#mail").val() + "&pw=" + $("#pw").val(),
        success: verifyDb
    });
});

像这样使用你的表格：

<form action="" id="yourForm" mehod="post">
    <input type="text" id="name" name="name" />
    <br />
    <input type="text" id="mail" name="mail" />
    <br />
    <input type="password" id="password" name="password" />
    <br />
    <input type="submit" value="Submit" />
</form>

应该可以，虽然我还没有测试过这个..

于 2013-06-09T21:56:49.173 回答