使用jQuery发生ajax请求，做一个注册登录功能！(本期知识：jQuery中的ajax)

更新时间:2023-04-08 23:26:32 阅读：评论：0

前言

今天我们来了解一下登录注册功能
在前端是怎么做的
以及非常非常强大的jQuery

涉及知识点

1.jQuery（官方下载：https://jquery.com/download/）
2.Ajax
3.后端语言PHP（使用PHP连接数据库获取插入前端传入的数据）
4.MySQL-Front数据库（存储前端传入的数据）

完整代码

注册页面

<!DOCTYPE html><html lang="en">    <head>        <meta chart="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>注册</title>        <style> div{  width: 300px; height: 200px; background-color: rgb(236, 236, 236); overflow: hidden; margin: 200px auto; } span{  display: bl续写穷人ock; text-align: center; vertical-align: middle; line-height: 30px; padding-top: 10px; } i{  font-style: normal; margin-left: 130px; line-height: 50px; font-size: 20px; overflow: hidden; } </style>    </head>    <body>        <div>            <i>注册</i>            <span>                王峰 最强大脑账号：<input type="text" placeholder="请输入账号" name="urname">                <p></p>                密码：<input type="password" placeholder="请输入密码" name="password">                <p></p>                <input type="submit">            </span>        </div>    </body>    <script src="./jquery.min.js"></script>    <script> $('input').eq(2).click(function(){  $.ajax({  url:'后端插入数据的PHP地址', data:{  urname:$('input').eq(0).val(), password:$('input').eq(1).val() }, success:function(res){  if(res.code){  location.href="登录页面地址" } }, dataType:'json' }) }) </script></html>

登录页面

<!DOCTYPE html><html lang="en">    <head>        <meta chart="UTF-8">        芊芊学子<meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>登录</title>        <style> div{  width: 300px; height: 200px; background-color: rgb(236, 236, 236); overflow: hidden; margin: 200px auto; } span{  display: block; text-align: center; vertical-align: middle; line-height: 30px; padding-top: 10px; } i{  font-style: normal; margin-left: 130px; line-height: 50px; font-size: 20px; overflow:利润率的公式 hidden; } </style>    </head>    <body>        <div>            <i>登录</i>            <span>                账号：<input type="text" placeholder="请输入账号" name="urname">                <p></p>                密码：<input type="password" placeholder="请输入密码" name="password">                <p></p>                <input type="submit">            </span>        </div>    </body>    <script src="./jquery.min.js"></script>    <script> $('input').eq(2).click(function(){  $.ajax({  url:'后端查询数据的PHP地址', data:{  urname:$('input').eq(0).val(), password:$('input').eq(1).val() }, success:function(res){  if(res.code){  location.href="登录成功的页面地址" 北欧传说} }, dataType:'json' }) }) </script></html>