您的位置：首页 > Web前端 > JQuery

【转】jQuery+Ajax+PHP登录实例 一个简单的用Jquery中ajax方法登录的例子

2014-02-13 13:46 1231 查看

HTML代码(login.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<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>

JS代码(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("登录中，请稍候");
},
success: function(msg){
if(msg == "success"){
$("#confirm").text("登录成功，欢迎" + user + "回来！正在进入你的空间");
}else {
$("#confirm").text("没有此用户或者密码不正确！");
}
}
});
}

PHP代码(login.php)

<?php
$p = isset($_POST["p"]) ? $_POST["p"] : $_GET["p"];
$id = isset($_POST["id"]) ? $_POST["id"] : $_GET["id"];
if($id == "admin" && $p == "admin"){
echo 'success';
}
?>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航