zoukankan      html  css  js  c++  java
  • 2021 1 21 用jQuery和ajax 和json实现之前的所有功能:

    用jQuery和ajax 和json实现之前的所有功能:

    登录:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>家庭记账本</title>
            <style type="text/css">/*设置CSS样式*/
             input[type=text]{
                color: #0099FF;
                width: 200px;
                height: 20px;
            } 
            input[type=password]{
                color: #0099FF;
                width: 200px;
                height: 20px;
                
            }
        </style>
        </head>
        <script type="text/javascript" src="js/jquery-3.5.1.js"></script>  <!-- 导入jQuery的js文件 -->
        <script type="text/javascript">
            $(document).ready(function(){   /* 绑定页面加载完成函数 */
                var form=$("#form1")[0]            
                $("#setbtn").click(function(){                /* 为注册按钮绑定函数 */
                    form.submit()
                })
                $("#loginbtn").click(function(){                /* 为登录按钮绑定函数 */
                    var a=$("#name").val()
                    var b=$("#pass").val()
                    $.get(            /* jQuery封装的ajax函数 */
                        "login_servlet",
                        {"password":b,"name":a},
                        function(resp){
                            console.log(resp)
                            if(resp.boolean=="false"){
                                alert("用户名或密码错误!")
                            }else{
                                window.location.href="login.jsp"
                            }    
                        },
                        "json"
                    )
                })
            })
        </script>
    <body>    <!-- 表单 -->
            <div id="div1" align="center">
                <h2 align="center"><font size="5" color="skyblue">家庭记账本账号登录系统</font></h2>
                <form action="SignUser.jsp" method="post" id="form1">
                    账号<input type="text" id="name" name="name"/><span id="YN"></span><br><br>
                    密码<input type="password" id="pass" name="password"/><span id="YP"></span><br>
                    <input type="button" id="loginbtn" value="登录" name="login"/>
                    <input type="button" id="setbtn" value="注册" name="set"/>            
                </form>
                
            </div>
        </body>
    </html>

    后台的login_servlet:

    package servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.sql.SQLException;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import dao.dao;
    
    /**
     * Servlet implementation class login_servlet
     */
    @WebServlet("/login_servlet")
    public class login_servlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public login_servlet() {
            super();
            // TODO Auto-generated constructor stub
        }
    
        /**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=utf-8");
            String name=null;
            String password=null;
            dao p=new dao();
            PrintWriter out=response.getWriter();
            name=request.getParameter("name");
            password=request.getParameter("password");
            try {
                if(p.check(name, password)) {
                    String a="{"boolean":"true"}";
                    out.println(a);
                }else {
                    String a="{"boolean":"false"}";
                    out.println(a);
                }
            } catch (SQLException e) {
                // TODO 自动生成的 catch 块
                e.printStackTrace();
            }
        }
    
        /**
         * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // TODO Auto-generated method stub
            doGet(request, response);
        }
    
    }

    注册界面:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>家庭记账本</title>
            <style type="text/css">
            input[type=text]{
                color: #0099FF;
                width: 200px;
                height: 20px;
                outline-color:aliceblue;
            }
            input[type=password]{
                color: #0099FF;
                width: 200px;
                height: 20px;    
            }    
        </style>
        </head>
        <script type="text/javascript" src="js/jquery-3.5.1.js"></script><!-- 导入jQuery的js文件 -->
        <script type="text/javascript">
            $(document).ready(function(){        /* 绑定页面加载完毕的函数 */
                var name=$("#name")
                $("#name").blur(function(){            /* 为“姓名”填写框绑定验证函数 */
                    if(name.val().length>10||name.val().length<3){
                        $("#YN").text("账号长度请保持在【3~10】!")/* 直接用text()函数可设定DOM内容*/
                    }else{
                        $("#YN").text("")
                    }
                })
                var pass=$("#pass")
                var pass2=$("#pass2")
                pass.blur(function(){            /*  为“密码”填写框绑定函数*/
                    if(pass.val().length!=6){
                        $("#YP").text("密码长度为6位!")
                    }else{
                        $("#YP").text("")
                    }
                    if(pass2.val!=""){            /* 修改密码后根据确认密码框是否有内容来更新DOM */
                        if(pass.val()!=pass2.val()){
                            $("#YP2").text("前后密码不一致!")
                        }else{
                            $("#YP2").text("")
                        }
                    }
                })
                pass2.blur(function(){              /* 为确认密码框绑定函数 */
                    if(pass.val()!=pass2.val()){
                            $("#YP2").text("前后密码不一致!")
                        }else{
                            $("#YP2").text("")
                        }
                })
                var setbtn=$("#setbtn")    /* 为“注册”按钮绑定函数 */
                setbtn.click(function(){
                    if(($("#YP").html()=="")&&($("#YP2").html()=="")&&($("#YN").html()=="")){     /* 根据error图层是否为空来确认表格是否符合要求 */
                        var a={"name":$("#name").val()}    /*  提前设计ajax的传输数据*/
                        $.ajax({       /*  jQuery封装好的ajax函数*/
                            url:"sign_servlet",            
                            data:a,
                            dataType:"json",
                            success:function(resp){
                                if(resp.boolean=="true"){        /* 验证用户名是否存在 */
                                    $("#signform")[0].submit()   /* 提交表格 */
                                }else{
                                    alert("用户名已存在!")
                                }
                            }
                        })
                    }
                })
            })
        </script>
        <body> <!-- 表单的body部分 -->
            <div id="div1" align="center">
            <h2 align="center"><font size="5" color="skyblue">家庭记账本账号注册系统</font></h2>
            <form action="sign_servlet?method=set" method="post" id="signform">
                    账号<input type="text" id="name" name="name"/><br><span id="YN"></span><br>
                    密码<input type="password" id="pass" name="password"/><br><span id="YP"></span><br>
                    确认密码<input type="password" id="pass2" name="password"/><br><span id="YP2"></span><br><br>
                    <input type="button" id="setbtn" value="注册" name="set"/>
            </form>
            </div>
        </body>
    </html>

    后台sign_servlet:

    package servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.sql.SQLException;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import dao.dao;
    
    /**
     * Servlet implementation class sign_servlet
     */
    @WebServlet("/sign_servlet")
    public class sign_servlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public sign_servlet() {
            super();
            // TODO Auto-generated constructor stub
        }
    
        /**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=utf-8");    
            dao p=new dao();
            PrintWriter out=response.getWriter();
            String name=null;
            name=request.getParameter("name");
            try {
                if(p.checkname(name)) {
                    String a="{"boolean":"true"}";
                    out.println(a);
                }else {            
                    String a="{"boolean":"false"}";
                    out.println(a);
                }    
            } catch (SQLException e) {
                // TODO 自动生成的 catch 块
                e.printStackTrace();
            }
        }
    
        /**
         * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=utf-8");    
            dao p=new dao();
            String method=null;
            method=request.getParameter("method");
            if(method.equals("set")) {
                String name=request.getParameter("name");
                String pass=request.getParameter("password");
                try {
                    p.add(name, pass);
                } catch (SQLException e) {
                    // TODO 自动生成的 catch 块
                    e.printStackTrace();
                }
                request.getRequestDispatcher("login.jsp").forward(request, response);
            }
        }
    
    }

    注意事项:

    1、jquery的$.ajax({})方法的接受数据格式key是"dataType",容易拼写错误

    2、传参的key是“data”

    3、ajax接受数据格式为text的话出现了不少字符串比较问题,“==‘”不能判断,用json就能解决问题,只不过后台servlet需要自己设定一个json,需要转义双引号,用’‘即可

  • 相关阅读:
    P1352 没有上司的舞会(树形DP入门,自底向上更新)
    链表和函数指针
    c语言中文件操作
    数据结构中的栈和堆与计算机内存划分的栈区和堆区的区别
    计算机组成原理—cpu
    Linux中一切皆文件
    G 火山哥周游世界(树上走过确切k个点的最短时间,树形dp)
    Paint Box(涂色要求相邻不能同色,求方案数,容斥)
    失衡天平
    hdu6761lyndon分解
  • 原文地址:https://www.cnblogs.com/fuxw4971/p/14310181.html
Copyright © 2011-2022 走看看