登录页面中的jquery按钮

jquery button in login page

本文关键字：jquery 按钮登录更新时间：2024-01-20

我对编程很陌生，对jquery按钮有一些问题。

我想使用jquery按钮（jqueryUI），但它不起作用，我的页面显示"用户名和密码不正确！"

那么我该如何解决这个问题呢？非常感谢。

HTML表单：-

<form id="Login_form" method="post" action="sql_login.php">
<table>
    <tbody>
    <tr> <td colspan="2"></td> </tr>
    <tr>
    <td> <span> USERNAME  : </span> </td>
    <td> <input  type="text" name="txt_username" id="txt_username" /> </td>
    </tr>
    <tr> <td colspan="2"></td> </tr>
    <tr>
    <td> <span> PASSWORD  : </span> </td>
    <td> <input  type="password" name="txt_password" id="txt_password"  /> </td>
    </tr>
    </tbody>
</table>
<input  type="submit"  value="Enter" class="Button"  ></input>
</form>

javascript（login.js）

  $(document).ready(function() {
       $('.Button').button().click(function(event){
         var usernameTxt = $('#txt_username').val();    
         var passwordTxt = $('#txt_password').val();
     if (usernameTxt =="" || passwordTxt =="") {
        alert("username or password required !");
        return false;
    }
     else window.location = "sql_login.php";
        });
       });

Php代码（sql_login.Php）

    <?ob_start();?>
    <?
session_start();
include("DB_Connect.php");
$sql = "SELECT * FROM user WHERE Username='".mysql_real_escape_string($_POST['txt_username'])."' 
and Password = '".mysql_real_escape_string($_POST['txt_password'])."'";
$query = mysql_query($sql);
$result = mysql_fetch_array($query);            
if(!$result)
{
  echo "Username and Password Incorrect!";
} else {        
      $_SESSION["UserType"] = $result["UserType"];
      session_write_close();
    if($result["UserType"] == '0')
    {
        header("Location: ../User/User_Schedule.php");              
    }
    else
    {
    header("Location: ../Admin/Admin_Schedule.php");
    }
}
mysql_close();
      ?>

如果出现错误，您需要阻止默认提交操作

$(document).ready(function(){
    $('form[id=Login_form]').submit(function(event){
        var usernameTxt = $('#txt_username').val();    
        var passwordTxt = $('#txt_password').val();
        if (usernameTxt =="" || passwordTxt =="") {
            alert("username or password required !");
            event.preventDefault(); //prevent default submit action
        }
    });
})

在发送这些数据时应该使用post或get方法。你可以试试：

   $(document).ready(function() {
   $('.Button').button().click(function(event){
     var usernameTxt = $('#txt_username').val();    
     var passwordTxt = $('#txt_password').val();
    if (usernameTxt =="" || passwordTxt =="") {
    alert("username or password required !");
       return false;
    }else{
         var dataString = "txt_username=" + usernameTxt + "&txt_password="passwordTxt;
         $.ajax({
           type: "POST",
           url: /sql_login.php,
           data:dataString,
           success:function(data){
                window.location(/User/User_Schedule.php)
            }
         });
      }
    });
   });