douhuilin1152
douhuilin1152
2014-12-14 08:35

验证表单,检查用户是否存在,注册它们。 全部使用Ajax

已采纳

My javascript is inside an html file called register.html. The user submits the form. This should then trigger the $('input[name="createacc"]').click(function (e) AJAX then sends those 4 variables to checkuser.php. Checkuser.php should then check to see if the username exists. If it does exist, it should echo 0. If it does not exists, it should echo 1. Register.html then checks to see what checkuser.php echoed. If the echo was "0" then, then an alert box should appear saying username unavailable. If the echo was "1" or anything else, register.html should run $("#registerform").submit(); which then does the php script. This should all happen without leaving the register.html page.

I check chrome's built in debugger and I see that if the account exists checkuser.php writes back 0 and if the account doesn't it writes back 1. But for some reason nothing else happens. The account does not register nor do I get an alert box saying the username is unavailable

here is my register.html

<form ata-parsley-validate name="registerform" id="registerform" action="register.php" method="post">

                        <p>
                            <label for="firstname">First Name:</label>
                            <input name="firstname" id="firstname" maxlength="32" type="text" placeholder="Optional" />
                        </p>
                        <p>
                            <label for="username" id="usernameText">Username:</label>
                            <input data-parsley-pattern="^[A-Za-z0-9_]{3,15}$" data-parsley-length="[3, 15]" name="username" id="username" maxlength="32" type="text" data-parsley-error-message="Username needs to be between 3 and 15 characters. Case sensitive. No special characters allowed." required/>
                        </p>
                        <p>
                            <label for="password1">Password:</label>
                            <input name="password1" id="password1" data-parsley-pattern="^[A-Za-z0-9_-]{5,25}$" data-parsley-length="[5, 25]" type="password" data-parsley-equalto="#password2" data-parsley-error-message="Passwords must match. Needs to be between 5 and 25 characters. Case sensitive. No special characters allowed." required/>
                        </p>
                        <p>
                            <label for="password2">Confirm Your Password:</label>
                            <input name="password2" id="password2" data-parsley-length="[5, 25]" data-parsley-error-message="Passwords must match. Needs to be between 5 and 25 characters. Case sensitive. No special characters allowed." data-parsley-pattern="^[A-Za-z0-9_-]{5,25}$" type="password" data-parsley-equalto="#password1" required/>
                        </p>
                        <p>
                            <label for="email">E-Mail:</label>
                            <input data-parsley-trigger="change" name="email" id="email" maxlength="1024" type="email" required/>
                        </p>
                        <p>
                            <input type="submit" id="submit" class="submit" name="createacc" value="Register" />
                        </p>
                    </form>

Here is my javascript

<script>
    $(document).ready(function () {


    $('input[name="createacc"]').click(function (e) {
        var username = $('input[name="username"]').val();
        var firstname = $('input[name="firstname"]').val();
        var password1 = $('input[name="password1"]').val();
        var email = $('input[name="email"]').val();
        e.preventDefault();
       $.ajax({
            type: 'POST',
            data: {
                username: username,
                firstname: firstname,
                password1: password1,
                email: email
            },
            url: 'checkuser.php',
            success: function (data) { //Receives the data from the php code
                if (data === "0") {
                    alert("Username Unavailable");
                } else {
                   $("#registerform").submit();
                alert("Account successfuly created"); 
                }


            },
            error: function (xhr, err) {
                console.log("readyState: " + xhr.readyState + "
status: " + xhr.status);
                console.log("responseText: " + xhr.responseText);
            }
        });
    });

        });
</script>

Update - I have fixed parts of my code through the help of others below me. My only issue now is that $("#registerform").submit(); doesn't do anything

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • duanqin9507 duanqin9507 7年前

    You are trying to return and JSON not setting

    header('Content-type: application/json');
    

    Decide whether you want to pass plaintext or json. Your string might be now "0", not 0

    Try

    if (data === '"0"') {
    
    点赞 评论 复制链接分享
  • douseda0009 douseda0009 7年前

    I think the problem is in your success.you have written If it does exist, it should echo 0. If it does not exists, it should echo 1.you should use:

    success: function (data) { //Receives the data from the php code
                    if (data == '"0"') {       //register if user exists.          
                    $("#registerform").submit();
                    } else {
                          alert("Username Unavailable");
                    }
    
    点赞 评论 复制链接分享