写一个简单的登录使用jquery ajax完成
时间: 2024-01-31 13:01:50 浏览: 34
好的,下面是使用jQuery Ajax实现简单登录的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#loginBtn").click(function(){
$.ajax({
type:"POST",
url:"login.php",
data:{
username:$("#username").val(),
password:$("#password").val()
},
success:function(data){
if(data=="success"){
alert("登录成功!");
}else{
alert("用户名或密码不正确!");
}
}
});
});
});
</script>
</head>
<body>
<h2>简单登录示例</h2>
<form>
<label>用户名:</label><input type="text" id="username"><br>
<label>密码:</label><input type="password" id="password"><br>
<input type="button" value="登录" id="loginBtn">
</form>
</body>
</html>
```
上面的代码中,使用jQuery的Ajax函数向服务器发送POST请求,请求的URL是login.php,请求的参数为username和password,即登录表单的两个输入框中的值。服务器处理完请求之后,返回一个字符串,如果返回的是成功的标识符“success”,则在页面上弹出登录成功的提示框;否则弹出“用户名或密码不正确”的提示框。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)