php ajax用户登陆验证程序代码
发布:smiling 来源: PHP粉丝网 添加日期:2014-01-16 12:59:58 浏览: 评论:0
核心代码如下:
- <script type="text/javascript">
- $(document).ready(function() {
- $("#login").click(function() {
- var action = $("#form1").attr('action');
- var form_data = {
- username: $("#username").val(),
- password: $("#password").val(),
- is_ajax: 1
- };
- $.ajax({
- type: "POST",
- url: action,
- data: form_data,
- success: function(response)
- {
- if(response == 'success')
- $("#form1").slideUp('slow', function() {
- $("#message").html("<p class='success'>登陆成功!</p>");
- });
- else
- $("#message").html("<p class='error'>用户名或密码错误.</p>");
- }
- });
- return false;
- });
- });
- </script>
index.php源码,代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>PHP Login with jQuery AJAX</title>
- <style>
- body, input {
- font-family: Georgia, "Times New Roman", Times, serif;
- }
- #content {
- background-color: #eee;
- width: 300px;
- margin: 0 auto;
- border: 1px solid #aaa;
- -moz-border-radius: 10px;
- -moz-box-shadow: 0 0 10px #aaa;
- -webkit-border-radius: 10px;
- -webkit-box-shadow: 0 0 10px #aaa;
- padding: 10px;
- }
- #form1 label {
- display: block;
- font-size: 16px;
- line-height: 25px;
- }
- #form1 input[type=text], #form1 input[type=password] {
- padding: 2px;
- font-size: 16px;
- line-height: 20px;
- width: 250px;
- }
- #form1 input[type=submit] {
- font-size: 20px;
- font-weight: bold;
- padding: 5px;
- }
- .success {
- color: #060;
- }
- .error {
- color: red;
- }
- </style>
- <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $("#login").click(function() {
- var action = $("#form1").attr('action');
- var form_data = {
- username: $("#username").val(),
- password: $("#password").val(),
- is_ajax: 1
- };
- $.ajax({
- type: "POST",
- url: action,
- data: form_data,
- success: function(response)
- {
- if(response == 'success')
- $("#form1").slideUp('slow', function() {
- $("#message").html("<p class='success'>You have logged in successfully!</p>");
- });
- else
- $("#message").html("<p class='error'>Invalid username and/or password.</p>");
- }
- });
- return false;
- });
- });
- </script>
- </head>
- <body>
- <p> </p>
- <div id="content">
- <h1>Login Form</h1>
- <form id="form1" name="form1" action="doLogin.php" method="post">
- <p>
- <label for="username">Username: </label>
- <input type="text" name="username" id="username" />
- </p>
- <p>
- <label for="password">Password: </label>
- <input type="password" name="password" id="password" />
- </p>
- <p>
- <input type="submit" id="login" name="login" />
- </p>
- </form>
- <div id="message"></div>
- </div>
- </body>
- </html>
loin.php代码如下:
- <?php
- $is_ajax = $_REQUEST['is_ajax'];
- if(isset($is_ajax) && $is_ajax)
- {
- $username = $_REQUEST['username'];
- $password = $_REQUEST['password'];
- if($username == 'demo' && $password == 'demo')
- {
- echo "success";
- }
- }
- ?>
Tags: ajax 用户登陆 验证
- 上一篇:php入门之留言板程序实现代码
- 下一篇:分享一个php实现无限级分类程序代码
相关文章
- ·ajax php 聊天室实例代码(1)(2013-12-16)
- ·ajax php 聊天室实例代码(2)(2013-12-16)
- ·ajax php 聊天室实例代码(3)(2013-12-16)
- ·ajax php 聊天室实例代码(4)(2013-12-16)
- ·ajax php 聊天室实例代码(5)(2013-12-16)
- ·PHP ajax 统计当前在线用户数程序代码(2014-01-06)
- ·php ajax用户登录代码(2014-01-15)
- ·php+ajax实现无刷新的新闻留言系统(2014-02-10)
- ·php jquery ajax用户登录实例代码(2014-07-04)
- ·php+jquery ajax邮箱地址无刷新验证实例(2014-07-04)
- ·ajax+php无刷新回贴和注册检验实例(2014-07-05)
- ·php ajax 留言板(2014-09-09)
- ·php+ajax注册验证实例(完整代码)(2015-04-10)
- ·PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程(2021-04-09)
- ·PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程(2021-04-09)
- ·PHP+jQuery+Ajax实现用户登录与退出(2021-05-25)
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)