Php 重新加载页面的AJAX登录表单_Php_Javascript_Jquery_Ajax

Php 重新加载页面的AJAX登录表单

php javascript jquery ajax

Php 重新加载页面的AJAX登录表单,php,javascript,jquery,ajax,Php,Javascript,Jquery,Ajax,尝试使用AJAX创建登录表单，这样用户登录时页面就不必更改。到目前为止，在使用了我发现的一个教程之后，我有以下内容，但是我有一个问题，表单的问题是重新加载页面，而不是调用JavaScript函数 HTML: JavaScript/jQuery： // Login function function check_login() { $.ajax({ type: 'POST', url: 'check-login.php', data: 'em

尝试使用AJAX创建登录表单，这样用户登录时页面就不必更改。到目前为止，在使用了我发现的一个教程之后，我有以下内容，但是我有一个问题，表单的问题是重新加载页面，而不是调用JavaScript函数

HTML:

JavaScript/jQuery：

// Login function
function check_login() {
    $.ajax({
        type: 'POST',
        url: 'check-login.php',
        data: 'email=' + $('input[value="email"]').val() + '&password=' + $('input[value="password"]').val(),
        success: function(response){
            if(response === '1') {
                alert('Log In Success');
            }
            else if(response === '2') {
                alert('Incorrect Details');
            }
            else if(response === '3') {
                alert('Fill In All Fields');
            }
        }
    });
}

非常感谢您的帮助。

尝试以下方法：

<form class="login-form">
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <button class="btn trans login-button" onclick="check_login()">Login</button>
</form>


登录

当登录提交时，它仍将尝试重新加载页面，因此您应该删除提交类型并将登录功能放在按钮上

通过标记附加事件侦听器不是一个好的做法，使用jQuery更干净、更容易

尝试这样做：

$("form.login-form .login-button").click(function(e) {
    e.preventDefault();
    check_login();
});

请记住删除此选项：

onSubmit=“check_login（）；return false；

使用此兄弟

<form id="F_login" class="login-form">
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <button id="btn_login" type="submit" class="btn trans login-button">Login</button>
</form>

$("#btn_login").click(function(){
    var parm = $("#F_login").serializeArray();
    $.ajax({
        type: 'POST',
        url: 'check-login.php',
        data: parm,
        success: function (response) {              
            if(response === '1') {
                alert('Log In Success');
            }
            else if(response === '2') {
                alert('Incorrect Details');
            }
            else if(response === '3') {
                alert('Fill In All Fields');
            }

        },
        error: function (error) {
            alert("Login Fail...");
        }
    });
});
            else if(response === '3') {
                alert('Fill In All Fields');
            }
        }
    });
}


登录
$（“#btn_登录”）。单击（函数（）{
var parm=$（“#F#u login”）.serializeArray（）；
$.ajax({
键入：“POST”，
url:“check login.php”，
资料来源：帕尔姆，
成功：功能（响应）{
如果（响应=='1'）{
警报（“登录成功”）；
}
否则如果（响应=='2'）{
警报（“不正确的详细信息”）；
}
否则如果（响应=='3'）{
警报（“填写所有字段”）；
}
},
错误：函数（错误）{
警报（“登录失败…”）；
}
});
});
否则如果（响应=='3'）{
警报（“填写所有字段”）；
}
}
});
}

它应该运行良好…

尝试将输入类型从“提交”更改为常规按钮，该按钮的单击操作是调用check_login（）

语句

check_login（）；return false

将不起作用。您必须在函数中调用

return check_login（）；

和

return false

HTML 正确的方法是：

HTML代码：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    // Login function
    $(function() {
        $('.login-button').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'check-login.php',
                data: $('form.login-form').serialize(),
                success: function(response) {
                    if (response === '1') {
                        alert('Log In Success');
                    } else if (response === '2') {
                        alert('Incorrect Details');
                    } else if (response === '3') {
                        alert('Fill In All Fields');
                    }
                }
            });
        });
    })
    </script>
    <title>Ajax Login Form (Demo)</title>
</head>

<body>
    <form class="login-form" name="login-form" method="POST" action="">
        <input type="text" name="email" placeholder="Email" />
        <input type="password" name="password" placeholder="Password" />
        <button type="submit" class="btn trans login-button">Login</button>
    </form>
</body>

</html>

用户阻止默认停止表单提交

您可以使用“序列化”功能制作后婴儿车。

有很多方法可以做到这一点：在索引中编写以下代码：

在javascript中使用“

eval

”函数而不是“alert”来显示结果
这意味着，在PHP代码上，当代码接收到真实的输入，并且数据库中有一个类似输入的用户时，PHP代码会响应javascript命令（下面是您发送ajax请求的PHP代码）：>

删除按钮类型并在其上而不是表单上使用onclick处理程序
它还将处理意外按下enter键时自动提交的情况
愉快的编码！！！
页面仍在刷新，并设置了默认的获取标题。仍在重新加载页面并发送获取标题。您是否将该代码放入$（文档）。就绪（函数（）{}）
？可能您的web浏览器存在一些缓存问题。请使用chrome web inspector设置一个断点，并检查代码是否正确执行。您是否尝试在ajax之前发出警报
？只是检查它是否正常工作？类似于函数check_login（）{alert（'hi'）}
它会在按下按钮后立即触发表单提交。@stu177尝试删除返回false；
-返回
将停止执行。@stu177并且saltHash
是内置函数吗？以前从未见过。您可能的意思是$password=hash（$password）；只尝试“返回false”“on submit，即onSubmit=“return false；”并调用函数check_login（）；点击按钮。另外，在php（服务器站点）上尝试使用exit；在你回音之后。如果仍然面临问题，请让我知道。dineshs@mindfiresolutions.comYou也可以通过Jquery使用它，但对于单个操作，最好使用onclick。另一方面，如果一次单击有多个操作，那么应该使用Jquery。
<form id="F_login" class="login-form">
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <button id="btn_login" type="submit" class="btn trans login-button">Login</button>
</form>

$("#btn_login").click(function(){
    var parm = $("#F_login").serializeArray();
    $.ajax({
        type: 'POST',
        url: 'check-login.php',
        data: parm,
        success: function (response) {              
            if(response === '1') {
                alert('Log In Success');
            }
            else if(response === '2') {
                alert('Incorrect Details');
            }
            else if(response === '3') {
                alert('Fill In All Fields');
            }

        },
        error: function (error) {
            alert("Login Fail...");
        }
    });
});
            else if(response === '3') {
                alert('Fill In All Fields');
            }
        }
    });
}

<form onsubmit="return check_login();">
   <!-- input fields here -->
</form>

function check_login() {
    // Do your ajax call.
    return false;
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    // Login function
    $(function() {
        $('.login-button').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'check-login.php',
                data: $('form.login-form').serialize(),
                success: function(response) {
                    if (response === '1') {
                        alert('Log In Success');
                    } else if (response === '2') {
                        alert('Incorrect Details');
                    } else if (response === '3') {
                        alert('Fill In All Fields');
                    }
                }
            });
        });
    })
    </script>
    <title>Ajax Login Form (Demo)</title>
</head>

<body>
    <form class="login-form" name="login-form" method="POST" action="">
        <input type="text" name="email" placeholder="Email" />
        <input type="password" name="password" placeholder="Password" />
        <button type="submit" class="btn trans login-button">Login</button>
    </form>
</body>

</html>

$(document).ready(function(){
//
}); or 

$(function(){
//
});

<?php if(response==1){
  echo '$("link_reload").trigger("click");';
} ?>