从PHP Ajax响应禁用按钮按钮、PHP、Ajax

2023-09-10 22:12:31 作者：攒一罐野樱

我试着搜索周围的堆栈溢出过去1小时后，尝试不同的方法，没有工作方法，所以认为它的时间t让一个线程。

好了，所以让我尝试解释一下我正在试图做的;

1）用户输入用户名进入现场 2）AJAX发送和检查对数据库的用户名 3）如果用户名取，JS禁用提交按钮 4），否则，如果它不是，JS允许他们提交。

我会告诉你我现在的code！这是我的js？

 ＆LT;脚本类型=文/ JavaScript的＆GT;
        $（文件）。就绪（函数（）{

    $（＃用户名）。模糊（函数（）{
      变种的用户名= $（本）.VAL（）;
      如果（用户名==''）{
        $（＃可用性）HTML（）。
      }
      其他{
        $阿贾克斯（{
          网址：class.validation.php用户名=+用户名
        }）。完成（功能（数据）{
          $（＃可用性）HTML（数据）;
          如果（$。HTML（数据）=='成功'）{
                警报（'嗒嗒'）
            }
        }）;
      }
    }）;
  }）;
＆LT; / SCRIPT＆GT;

这是PHP

  $用户名= $ _GET [用户名];

$用户名=用strtolower（$用户名）;

$语句= $ mysqli-＆GT; prepare（选择用户名从数据库名其中username =？）;
$ stmt-＆GT; bind_param（S，$用户名）;
$ stmt-＆GT;执行（）;
$结果集= $ stmt-＆GT; get_result（）;

$数组=阵列（'名1'，'NAME2'，'NAME3'，'名称4'）;

//打印结果
如果（in_array（$的用户名，$阵列）== 1）{
    回声＆LT; IMG SRC =的https：//cdn2.iconfinder.com/data/icons/ledicons/cross.png'>;
    出口（）;
} ELSEIF（strlen的（$用户名）3;）{
    回声没有足够的字符';
    回声＆LT; IMG SRC =的https：//cdn2.iconfinder.com/data/icons/ledicons/cross.png'>;
    出口（）;
} ELSEIF（mysqli_num_rows（$结果集）== 0）{
    回声＆LT; IMG SRC =的https：//cdn1.iconfinder.com/data/icons/ledicons/accept.png'>;
    死（）;
} 其他{
    回声这个用户名已经采取！;
    回声＆LT; IMG SRC =的https：//cdn2.iconfinder.com/data/icons/ledicons/cross.png'>;
    死（）;
}

和我使用，以显示消息的HTML;

 ＆LT;输入类型=文本ID =电子邮件NAME =电子邮件级=email_landing占位符=请输入您的电子邮件地址＆GT;
                        ＆LT;输入类型=文本ID =用户名NAME =用户名级=username_landing占位符=选择你的用户名＆GT;
                        ＆LT;输入类型=提交级=submit_landingID =提交名称=提交值=索赔＆GT;
＆LT; DIV ID =可用性＆GT;＆LT; / DIV＆GT;

解决方案

的JavaScript

  $（'＃用户名）。模糊（函数（）{//典型用法
$（'＃用户名）。KEYUP（函数（）{//或使用它来检查每个键击后！
    如果（$（本）.VAL（）===''）{
        $（'＃loginButton）ATTR（禁用，禁用）。
        $（'#availability）.attr（'src'中，将https：//cdn2.iconfinder.com/data/icons/ledicons/cross.png'）;
        $（'＃loginMessage）文本（用户名不能为空！）。
    } 其他 {
        $ .getJSON（'class.validation.php'，{用户名：用户名}，功能（数据）{
            $（'＃可用性）ATTR（SRC，data.icon）。
            $（'＃loginMessage）文本（data.msg）。
            如果（data.isValid ===真）{
                $（'＃loginButton）removeAttr（已禁用）。
            } 其他 {
                $（'＃loginButton）ATTR（禁用，禁用）。
            };
        }）;
    }
}）;

PHP

  $用户名= $ _GET [用户名];
$用户名=用strtolower（$用户名）;
$语句= $ mysqli-＆GT; prepare（选择用户名从数据库名其中username =？）;
$ stmt-＆GT; bind_param（S，$用户名）;
$ stmt-＆GT;执行（）;
$结果集= $ stmt-＆GT; get_result（）;
$数组=阵列（'名1'，'NAME2'，'NAME3'，'名称4'）;
//打印结果
如果（in_array（$的用户名，$阵列）== 1）{
    $ sback ['图标'] ='https://cdn2.iconfinder.com/data/icons/ledicons/cross.png
    $ sback ['的isValid'] = FALSE;
    $ sback ['味精'] ='这名已在使用！;
} ELSEIF（strlen的（$用户名）3;）{
    $ sback ['图标'] ='https://cdn2.iconfinder.com/data/icons/ledicons/cross.png
    $ sback ['的isValid'] = FALSE;
    $ sback ['味精'] ='此用户名是太短了！;
} ELSEIF（mysqli_num_rows（$结果集）== 0）{
    $ sback ['图标'] ='https://cdn2.iconfinder.com/data/icons/ledicons/accept.png
    $ sback ['的isValid'] =真;
    $ sback ['味精'] ='这个用户名可用！;
} 其他 {
    $ sback ['图标'] ='https://cdn2.iconfinder.com/data/icons/ledicons/cross.png
    $ sback ['的isValid'] = FALSE;
    $ sback ['味精'] ='有个问题！;
}
回声json_en code（$ sback，JSON_ preTTY_PRINT）;

HTML

 ＆LT;输入类型=文本ID =电子邮件NAME =电子邮件级=email_landing占位符=请输入您的电子邮件地址＆GT;
＆LT;输入类型=文本ID =用户名NAME =用户名级=username_landing占位符=选择你的用户名＆GT;
＆LT;输入类型=提交级=submit_landingID =loginButtonNAME =提交值=索赔＆GT;
＆LT; DIV＆GT;＆LT; IMG ID =可用性/＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =loginMessage＆GT;＆LT; / DIV＆GT;

I've tried searching around for past 1 hour on Stack Overflow, trying different methods with no working methods, so thought its time ti make a thread.

Okay so let me try explain what I'm trying to do;

1) User inputs username into field 2) AJAX sends and checks the username against the database 3) If the username is taken, js disables the submit button 4) otherwise if its not, js allows them to submit it.

I'll show you my current code! This my js?

        <script type="text/javascript">
        $(document).ready(function () {

    $("#username").blur(function () {
      var username = $(this).val();
      if (username == '') {
        $("#availability").html("");
      }
      else{
        $.ajax({
          url: "class.validation.php?username="+username
        }).done(function( data ) {
          $("#availability").html(data);
          if($.html(data) == 'success') {
                alert('blah')
            }
        });   
      } 
    });
  });
</script>

This is the PHP

     $username = $_GET['username'];

$username = strtolower($username);

$stmt = $mysqli->prepare("SELECT username FROM databasename WHERE username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$resultSet = $stmt->get_result();

$array = array('name1', 'name2', 'name3', 'name4');

//Prints the result
if (in_array($username, $array) == 1) {
    echo "<img src='https://cdn2.iconfinder.com/data/icons/ledicons/cross.png'>";
    exit();
}elseif (strlen($username) < 3){
    echo 'not enough char';
    echo "<img src='https://cdn2.iconfinder.com/data/icons/ledicons/cross.png'>";
    exit();
}elseif (mysqli_num_rows($resultSet) == 0) {
    echo "<img src='https://cdn1.iconfinder.com/data/icons/ledicons/accept.png'>";
    die();
} else{
    echo "That username has been taken!";
    echo "<img src='https://cdn2.iconfinder.com/data/icons/ledicons/cross.png'>";
    die();
}

And the HTML I'm using to display the message;

<input type="text" id="email" name="email" class="email_landing" placeholder="Enter your email address">
                        <input type="text" id="username" name="username" class="username_landing" placeholder="Choose your username">
                        <input type="submit" class="submit_landing" id="submit" name="submit" value="Claim">
<div id="availability"></div>

解决方案

JavaScript

$('#username').blur(function() { // typical usage
$('#username').keyup(function() { // or use THIS to check after each keystroke!
    if ($(this).val() === '') {
        $('#loginButton').attr('disabled','disabled');
        $('#availability').attr('src','https://cdn2.iconfinder.com/data/icons/ledicons/cross.png');
        $('#loginMessage').text('Username may not be blank!');
    } else {
        $.getJSON('class.validation.php',{username:username},function(data) {
            $('#availability').attr('src',data.icon);
            $('#loginMessage').text(data.msg);
            if (data.isValid === true) {
                $('#loginButton').removeAttr('disabled');
            } else {
                $('#loginButton').attr('disabled','disabled');
            };
        });
    }
});

PHP

$username = $_GET['username'];
$username = strtolower($username);
$stmt = $mysqli->prepare("SELECT username FROM databasename WHERE username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$resultSet = $stmt->get_result();
$array = array('name1', 'name2', 'name3', 'name4');
//Prints the result
if (in_array($username, $array) == 1) {
    $sback['icon'] = 'https://cdn2.iconfinder.com/data/icons/ledicons/cross.png'
    $sback['isValid'] = false;
    $sback['msg'] = 'That username is already in use!';
} elseif (strlen($username) < 3){
    $sback['icon'] = 'https://cdn2.iconfinder.com/data/icons/ledicons/cross.png'
    $sback['isValid'] = false;
    $sback['msg'] = 'That username is too short!';
} elseif (mysqli_num_rows($resultSet) == 0) {
    $sback['icon'] = 'https://cdn2.iconfinder.com/data/icons/ledicons/accept.png'
    $sback['isValid'] = true;
    $sback['msg'] = 'That username is available!';
} else {
    $sback['icon'] = 'https://cdn2.iconfinder.com/data/icons/ledicons/cross.png'
    $sback['isValid'] = false;
    $sback['msg'] = 'There was a problem!';
}
echo json_encode($sback,JSON_PRETTY_PRINT);

HTML

<input type="text" id="email" name="email" class="email_landing" placeholder="Enter your email address">
<input type="text" id="username" name="username" class="username_landing" placeholder="Choose your username">
<input type="submit" class="submit_landing" id="loginButton" name="submit" value="Claim">
<div><img id="availability" /></div>
<div id="loginMessage"></div>

上一篇：在foreach循环AJAXfo、reach、AJAX

下一篇：设置请求头，在网址是什么？网址

相关推荐

精彩图集

精彩推荐

图片推荐