Question

我正在尝试使用Ajax和PHP后端创建一个登录表单。但是，当我点击提交按钮时，除了关闭模式框之外没有任何其他事情发生。我做了一些测试，它看起来像是$（“＃login”）。click（function（）{甚至没有被调用。下面是我的代码。为什么会这样？

这是我的JS代码：

$(document).ready(function(){
    // Open login modal when login button is clicked
    $("#login_btn").click(function(){
        $('#login_modal').modal();
    });

    // Submit the login information when the sign in button is clicked
    $("#login").click(function(){ 
        var user=$("#user").val();
        var password=$("#password").val();
        var login_info="user="+user+"&password="+password;

        $.ajax({ 
            type: "POST",
            url: "../php/authentication.php",
            data: login_info, 
            success: function(msg){ 
                var msg=trim(msg);  
                // Redirect user if authentication is successful  
                if(msg == 'OK') { 
                    window.location = '../../action-log.php';
                 } 
                 // Print error message
                 else { 
                     $('#login_response').html(msg);
                 }     
            }     
        });
    }); 
});

以下是表单的代码：

<link type="text/css" rel="stylesheet" media="screen" href="assets/css/css_action-log-login.css">
<script type="text/javascript" charset="utf-8" src="./assets/js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./assets/js/jquery.simplemodal.js"></script>
<script type="text/javascript" charset="utf-8" src="./assets/js/js_action-log-login.js"></script>
<div id="login_modal" style="display: none;">
<div class="heading">Sign In</div>
<div id="login_response"></div>
<form id="login_form" method="post">
<table align="center" style="margin-top: 25px;" border="0">
<tr><td>
<label>Username: </label><br/><br/>
<label>Password: </label>
</td><td>
<input type="text" name="user" id="user" /><br/><br/>
<input type="password" id="password" name="password" />
</td></tr>
<tr><td></td><td align="left">
<input type="submit" name="login" id="login" value="Sign In" class="button blue" />
</td></tr>
</table>
</form>
</div>

这是authentication.php：

<?php
// Requires
require('./config.inc.php');
require('./functions.inc.php');

// Session
session_start();

// Error messages
$errormsg=array();

// Check if the username field is empty
if(isset($_POST['user']) && !empty($_POST['user'])){
    $user=mysql_real_escape_string($_POST['user']);
} else {
    $errormsg[]='username';
}

// Check if the password field is empty
if(isset($_POST['password']) && !empty($_POST['password'])){
    $password=mysql_real_escape_string($_POST['password']);
} else {
    $errormsg[]='password';
}

// Print error message
if(count($errormsg) > 0) {
    echo 'Please enter your ';
    for($i=0; $i < count($errormsg); $i++){
         echo $errormsg[$i];
         if($i < count($errormsg)-2) echo ', ';
         if($i == count($errormsg)-2) echo ' and ';
     }
} 
// Verify authentication details
else {
    $db = new mysql();
    $salt = "*65'][as'``'fg4";
    $querySQL = ('
        SELECT COUNT(*)

        FROM al_users

        WHERE username = "'.$user.'"

        AND password = PASSWORD("'.$password.$salt.'")
    ');
    $result = mysql_query($querySQL); 
    if(!$result) die(mysql_error()); 
    $row = mysql_fetch_row($result); 
    if($row[0] == 0) {
        echo 'Invalid email or password.';
    } else {
        $_SESSION['name'] = $user;
        echo 'OK';
    }   
}
?>

Answer 1

试试这个

 $(document).on('click','#login',function (){
   //Do magic here
});

Answer 2

您没有取消按钮点击，因此表单正在提交。使用preventDefault()

取消默认操作

$("#login").click(function(e){
    e.preventDefault()
    ...

Answer 3

尝试将event添加为参数，并在开头调用prevent default。

$("#login").click(function(event){ 
event.preventDefault();

等...

Answer 4

首先，我建议您在Chrome中检查Firebug（Firefox）或开发人员工具，看看您是否有任何JavaScript错误，或者是否有任何JS文件（jQuery）未加载......

然后，如果所有内容都已正确加载，请尝试使用<form>的提交操作，如下所示：

$("#login_form").submit(function()
{
     var user=$("#user").val();
     var password=$("#password").val();
     var login_info="user="+user+"&password="+password;

     $.ajax({ 
             type: "POST",
             url: "../php/authentication.php",
             data: login_info, 
             success: function(msg){ 
             var msg=trim(msg);  
             // Redirect user if authentication is successful  
             if(msg == 'OK') { 
                window.location = '../../action-log.php';
             } 
             // Print error message
             else{ 
                 $('#login_response').html(msg);
             }     
         }     
    });

    return false; // Prevents normal form submit since you posted using AJAX

});

Answer 5

您需要阻止提交按钮的默认功能。

Here is the jsFiddle

// Submit the login information when the sign in button is clicked
    $("#login").click(function(event){ 
        event.preventDefault();
        var user=$("#user").val();
        var password=$("#password").val();
        var login_info="user="+user+"&password="+password;
        // rest of your code

希望它对你有用：）

Answer 6

点击功能无效，因为您的输入类型是提交。

<input type="submit" name="login" id="login" value="Sign In" class="button blue" />
             ^^^^^

第一个选项是将Button类型更改为Button然后执行单击功能

<input type="button" name="login" id="login" value="Sign In" class="button blue" />

或执行提交活动，而不是点击：

$("#login_form").submit(function{


});

jQuery函数不执行

6 个答案: