ajax 实现密码登录

HTML代码

 

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.js"></script> //导入js包

</head>
<script>
$(document).ready(function(){
$("#but").click(function(){
var a=$("#name").val();
var b=$("#mima").val();


$.post("i-ajax.php",{'name':a,'mima':b,},function(data){
alert(data); //弹窗
window.location.href="ajaxdonglu.php";
}); //index1.php引入php文件运行这个文件 {}中间写上面var a=$("#name").val();对应的值 funtion定义个变量用alert弹窗输出

});

});

</script>


<body>


<input type="text" id="name" placeholder="姓名" >
<input type="password" id="mima" placeholder="密码至少6位数"><p></p>

<button type="button" id="but">登录</button>

 

</body>
</html>

 

PHP代码

 

<?php


header( 'Content-Type:text/html;charset=utf-8 ');


include_once("conn/conn.php"); //引入导入数据库控制页面

$name=$_POST["name"];
$mima=$_POST["mima"];


$sql="SELECT*from user where name ='$name' and mima='$mima' ";
$r=mysqli_query($link,$sql);// $link要使用的mysql连接 $sql要查询的字符串
$n=mysqli_num_rows($r);
if ($n>0) {
echo "登录成功";
}else{
echo"登录失败";
}

 

?>

 

引入数据库的PHP代码

 

 

<?php
$host="localhost";//规定主机名和ip地址
$db_user="root"; //数据库用户
$db_pass=""; //数据库密码
$db_name="sqlclass1"; //要使用的数据库数据库
$timezone = "Asia/Shanghai";//上海时间

$link=mysqli_connect($host,$db_user,$db_pass,$db_name);//mysqli_connect打开一个到 MySQL 服务器的新的连接
mysqli_query($link,"SET names UTF8");//link 是规定要使用的mysql连接 后面是设置编码格式
header("Content-Type: text/html; charset=utf-8");
date_default_timezone_set($timezone); //北京时间
?>

 

转载于:https://www.cnblogs.com/xinxueyou/p/7884680.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用 Ajax 实现登录,可以按照以下步骤进行: 1. 创建一个登录表单,包含用户名和密码输入框,以及提交按钮。 2. 在 JavaScript 中,获取表单元素和提交按钮元素,并通过 addEventListener() 方法为提交按钮添加 click 事件监听器。 3. 在事件监听器中,获取用户名和密码输入框中的值,并创建一个 XMLHttpRequest 对象。 4. 使用 XMLHttpRequest 对象发送 POST 请求,向后端服务器发送登录请求,并传递用户名和密码参数。 5. 在请求成功后,获取服务器返回的响应数据,并根据响应数据决定是否登录成功。 6. 如果登录成功,可以在前端页面中显示一条登录成功的提示信息,并进行相应的页面跳转。 以下是一个示例代码,供参考: ```html <form id="login-form"> <label>用户名:</label> <input type="text" id="username" name="username"><br> <label>密码:</label> <input type="password" id="password" name="password"><br> <button type="button" id="login-button">登录</button> </form> <script> var form = document.getElementById('login-form'); var usernameInput = document.getElementById('username'); var passwordInput = document.getElementById('password'); var loginButton = document.getElementById('login-button'); loginButton.addEventListener('click', function() { var xhr = new XMLHttpRequest(); xhr.open('POST', '/login'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload = function() { if (xhr.status === 200) { var response = JSON.parse(xhr.responseText); if (response.success) { alert('登录成功!'); window.location.href = '/home'; } else { alert('登录失败,请检查用户名和密码!'); } } else { alert('登录失败,请稍后再试!'); } }; var data = 'username=' + encodeURIComponent(usernameInput.value) + '&password=' + encodeURIComponent(passwordInput.value); xhr.send(data); }); </script> ``` 请注意,以上示例代码仅为参考,具体实现方式可能因后端服务器的不同而有所差异。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值