ajax实现登录

最新推荐文章于 2023-05-22 23:12:02 发布

动心。

最新推荐文章于 2023-05-22 23:12:02 发布

阅读量7.9k

点赞数 8

分类专栏：个人

本文链接：https://blog.csdn.net/qq_43494108/article/details/100078184

版权

个人专栏收录该内容

5 篇文章 2 订阅

订阅专栏

ajax实现登录

1.ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。
今天带来的是登录的时候如果密码或账号错误将会在原页面进行提示首先我们来看jsp页面代码

<body>
    <div id="zuida">
        <div>
            <div>
            </div>
            <span>登录</span>
        </div>
        <div>
          <form action="">
                <p><input type="text" placeholder="请输入账号" maxlength="11"id="userId"/><span></span></p>
                <p><input type="password" placeholder="请输入密码,长度：6-16位" maxlength="16" id="pwd"pattern="\d{6,16}"/><span></span></p>
                <input type="button" value="登录" id="dl"/>
            </form>
        </div>
    </div>
    </body>

在两个input旁边都加了一个span标签，这是用来显示提示文本的
在这里插入图片描述

然后我们创建一个数据库并往里面添加两条测试数据

在这里插入图片描述
当我们点击登录的时候要匹配数据库里的账号(userId)和密码(pwd)是否一致然后将匹配的结果返回到页面告知用户但是不要刷新页面，因为一刷新整个页面所输入的账号和密码就会全部清空。所以这里用jquery和ajax来进行操作

<script type="text/javascript" src="<%=basePath%>xiaozhujsp/js/jquery-1.12.4.js"></script>//导入jquery
<script type="text/javascript">  
    $(function(){
        $("#dl").click(function(){
           var $userId=$("#userId");//储存文本框的jQ对象
           var $pwd=$("#pwd");//储存密码框的jQ对象
           if($userId.val()==""){//判断输入的账号是否为空
               $userId.next().text("账号为空").css({"font-weight":"bold","color":"red"});
               event.preventDefault();//取消提交
           }else if($pwd.val()==""){
             $pwd.next().text("密码为空").css({"font-weight":"bold","color":"red"});
             event.preventDefault();
           }else{
             //登录的ajax
             $.ajax({
                 url:"<%=basePath%>wbu?method=dengl",
                 type:"post",
                 data:{
                     userId:$userId.val(),
                     pwd:$pwd.val()
                 },
                 success:function(result){
                     if(result=="no"){
                         $userId.next().text("用户名或密码错误").css({"font-weight":"bold","color":"red"});
                         $pwd.next().text("用户名或密码错误").css({"font-weight":"bold","color":"red"});
                     }else{
                         alert("登录成功");
                     }

                 }
            });
         }
     });

event.preventDefault()：取消标签的默认特性
如果输入的不为空，就通过ajax去后台进行账号密码匹配，如果中间没有报错，那么就会通过success的方法来进行判断如果为no就提示用户账号密码错误，如果为yes就跳转到别的页面
接下来看后台代码

public void doPost(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
      req.setCharacterEncoding("utf-8");//设置请求对象的编码格式
      resp.setCharacterEncoding("utf-8");//设置相应对象的编码格式
      resp.setContentType("text/html;charset=utf-8");//设置文本的类型和编码格式
      String method=req.getParameter("method");//获取提交的执行操作
      PrintWriter out=resp.getWriter();//打印文本
      if("dengl".equals(method)){//登录
          String userId=req.getParameter("userId");//获取ajax传来的登录的账号
          String pwd=req.getParameter("pwd");//获取ajax传来的密码
          if(dzs.DL(userId, pwd)!=null){//如果找到了该用户名打印yes也就是前面ajax的判断res=="no"
    		out.print("yes");
          }else{
    		out.print("no");
          }
     }  
}

public User DL(String userId,String pwd){
  String sql="select * from `user` where userId=? and pwd=?";
  return this.queryUser(sql, userId,pwd).size()>0?this.queryUser(sql, userId,pwd).get(0):null;//找到了就返回该对象，否则返回null
 }

然后接下来我们来看运行结果
首先我们输入一个错误的

在这里插入图片描述
就会提示输入的用户名或密码错误
然后如果输入正确的

动心。

关注

8
点赞
踩
35

收藏

觉得还不错? 一键收藏
2
评论
ajax实现登录

ajax实现登录1.ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。今天带来的是登录的时候如果密码或账号错误将会在原页面进行提示首先我们来看jsp页面代码<body> <div id="zuida"> <div...
复制链接

扫一扫