AJAX通过提交按钮实时检查可用性

小编典典

AJAX通过提交按钮实时检查可用性

ajax

test1.php

        <html>
    <head>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $('#username').change(function(){
                var userName = $('#username').val();

                $.post("getUserName.php", {userName: userName}, function(data){
                    $("#userNameCheck").html(data);
                });
           }); 

           $('#submit').click(function(){
                //CODE HERE

           });
        });
    </script>
    </head>

    <body>
    <form action="" method="post" id="addform">
        Username: <input type="text" name="username" id="username" size="24" class="required" maxlength="22" />
        <div id="userNameCheck"></div>
        <input type="submit" id="submit" name="submit" value="ADD user" />
    </form>
    </body>
    </html>

getUserName.php

        <?php
    include("db.php");

    $userName = $_POST['userName'];
    $q = "select user_name from user where user_name = '".$userName."'";
    $r = mysqli_query($dbc, $q);

    $num =  mysqli_num_rows($r);

    if($num)
    {
          echo '<div style="color:red">Username taken. Please type another new one.    
         </div>';
    }
    else
    {
          echo '<div style="color:green">You can use it.</div>';
    }
    ?>

数据库（用户表）

user_id user_name  
1 ali  
2 abu

从上面开始：
=> 在文本框中键入“ ali ”->显示绿色消息“您可以使用它”。
=> 在文本框中键入 ahmad- >以红色显示“ Username included …”消息。
我的要求是，如果消息是“您可以使用它”，请转到test2.php；如果消息是“用户名已使用…”，则表单上没有提交。
我的问题是，当我单击“提交”按钮时，如何控制“您可以使用它”或“获取用户名”消息？

阅读 223

2020-07-26

共1个答案

小编典典

不要使用按钮的单击处理程序，而要使用表单提交事件。

$(document).ready(function () {
    $('#username').change(function () {
        var userName = $('#username').val();

        $.post("getUserName.php", {
            userName: userName
        }, function (data) {
            $("#userNameCheck").html(data);
        });
    });

    $('#addform').submit(function () {
        //if the text is `You can use it` allow the form submit else block it
        return $("#userNameCheck").html().trim() == 'You can use it';
    });
});

还要确保您执行相同的验证，test2.php因为客户端验证可以分步进行。

2020-07-26