Ajax实现的登录验证-优快云博客

本文介绍了一个使用Ajax技术实现的简单登录验证系统。该系统包括一个登录页面login.html，一个JavaScript文件login.js用于处理登录逻辑及Ajax请求，以及一个PHP文件login.php用于验证用户名和密码。当用户输入用户名和密码并提交时，系统会通过Ajax发送POST请求到服务器端进行验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 、Ajax 登陆
（1）login.html

<html><head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="login.js"></script>
<style type="text/css">
body { font:12px/1.6em "宋体" }
ul { list-style:none; }
li { margin-top:10px; }
</style>
</head>
<body>
<h3>会员登录</h3>
<div id="login">
<form method="post" action="login.php" id="form" name="form">
    <ul>
      <li>名字：<input type="text" name="user" id="user" size="16" maxlength="20"></li>
      <li>密码：<input type="password" name="pass" id="pass" size="16" maxlength="20"></li>
      <li>
        <input type="submit" style="border:0" />
      </li>
      <li id="confirm"></li>
    </ul>
</form>
</div>
</body></html>

（2）login.js

$(document).ready

(
function()
{
    $("#form").submit
    (
       function()
        {
        login();
        return false;
        }
    );
}
);
function login()
{
var user = $("#user").val();
var pass = $("#pass").val();
if (user == "")
{
    $("#confirm").text("请输入登录用户名");
    $("user").focus();
    return false;
}
if(pass == "")
{
    $("#confirm").text("请输入登录密码");
    $("#pass").focus();
    return false;
}
$.ajax({
    type: "POST",
    url: "login.php",
    data: "id=" + user + "&p=" + pass,
    beforeSend: function(){
    $("confirm").text("登录中，请稍候