ajax请求实现登录注册

最新推荐文章于 2023-04-10 06:00:00 发布

攻城狮是怎样攻城的

最新推荐文章于 2023-04-10 06:00:00 发布

阅读量5.1k

点赞数 6

文章标签： ajax

本文链接：https://blog.csdn.net/xiaobai_jq/article/details/105855064

版权

之前是用form表单提交数据到后台，form表单提交会导致整个页面重新加载会显得不方便，如果不想要页面跳转，我们就用到了ajax请求，这边用的是jQuery ajax。之前页面做的也很丑，这次使用miniui前台框架完成。

新建一个jsp
代码如下

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>文本提示</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="demo.css" rel="stylesheet" type="text/css" />

    <script src="jquery.js" type="text/javascript"></script>
    <script src="scripts/boot.js" type="text/javascript"></script>
    
    
    <style type="text/css">
    .errorText
    {
        color:red;
    }
    </style>
</head>
<body>      
     

    <div id="form1">
        <table>
            <tr>
                <td>
                    <label for="username$text">帐号：</label>
                </td>
                <td>
                    <input name="username" errorMode="none" onvalidation="onUserNameValidation" vtype="email" class="mini-textbox" required="true" requiredErrorText="帐号不能为空"/>                    
                </td>    
                <td id="username_error" class="errorText"></td>
            </tr>
            <tr>
                <td>                   
                    <label for="pwd$text">密码：</label>
                </td>
                <td>
                    <input name="pwd" errorMode="none" onvalidation="onPwdValidation" class="mini-password" required="true" vtype="minLength:5" minLengthErrorText="密码不能少于5个字符"/>                    
                </td>
                <td id="pwd_error" class="errorText"></td>
            </tr>            
            <tr>
                <td>
                    
                </td>
                <td>
                    <input value="Login" type="button" onclick="submitForm()" />
                </td>
                
            </tr>
        </table>
    </div>

    
    <script type="text/javascript">
        mini.parse();

        function submitForm() {
        	debugger;
            var form = new mini.Form("#form1");
            form.validate();

            if (form.isValid() == false) return;

            //提交数据
            var data = form.getData();
            var json = mini.encode(data);
            $.ajax({
            	url:"login",
            	type:"post",
            	data:data,
            	async:false,
            	success:function(msg){
            		if(msg=="cg"){
            			alert("登录成功");
            			window.location.href="index.jsp"
            		}else if(msg=="sb"){
            			alert("账号或密码错误");
            		}else if(msg=="null"){
            			alert("无当前用户");
            		}
            		
            	},
            	error:function(res){
            		alert("返回出错");
            	}
            })
        }

        //
        function updateError(e) {
            var id = e.sender.name + "_error";
            var el = document.getElementById(id);
            if (el) {
                el.innerHTML = e.errorText;
            }
        }
        function onUserNameValidation(e) {                  
            updateError(e);
        }
        function onPwdValidation(e) {        
            updateError(e);
        }
    </script>


</body>
</html>

新建一个Servlet
代码如下

package cn.com.selevt;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.com.db.DBUtil;

 

public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
   
    public LoginServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		 doPost(request,response);
	}

	 
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String username=request.getParameter("username");
		String pwd=request.getParameter("pwd");
		Connection conn=DBUtil.getMySqlConn();
		String sql="select * from user where username='"+username+"'";
		try {
			Statement stmt=conn.createStatement();
			ResultSet rs=stmt.executeQuery(sql);

				
				String bj="";
				if(rs.next()) {
					String Pwd=rs.getString("password");
					if(Pwd.equals(pwd)) {
						bj="cg";
					}else {
						bj="sb";
					}
				}else {
					bj="null";
				}
				PrintWriter out=response.getWriter();
				out.write(bj);
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

}

连接数据库文件
代码如下

package cn.com.db;
 
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
 
public class DBUtil {
 
	// 设置成私有的
	private static Connection conn;            //  连接对象
	private static final String username = "root"; //  数据库用户名 
	private static final String password = "root"; //  数据库密码
	private static final String url = "jdbc:mysql://localhost:3306/login?characterEncoding=UTF-8";   //"login"是指你的数据库名称   //3306是端口
	private static final String driver = "com.mysql.jdbc.Driver";// 数据库驱动
	

	public static Connection getMySqlConn() {
		try {
			try {
				Class.forName(driver);
			}catch (ClassNotFoundException e) {
				System.out.println("加载驱动包失败");
				e.printStackTrace();
			}
			conn=DriverManager.getConnection(url,username,password);
		}catch(SQLException e) {
			System.out.println("获取连接失败"+e.getMessage());
		}
		return conn;
	}
}

配置xml需要名称保持一致，这边就不细说了。

目录结构如下
在这里插入图片描述

利用muniui前台框架需要去官网下载一些文件，详情可见官网
这里需要引入jquery.js 下载链接：https://download.csdn.net/download/xiaobai_jq/12376919

攻城狮是怎样攻城的

关注

6
点赞
踩
34

收藏

觉得还不错? 一键收藏
0
评论
ajax请求实现登录注册

之前是用form表单提交数据到后台，form表单提交会导致整个页面重新加载会显得不方便，如果不想要页面跳转，我们就用到了ajax请求，这边用的是jQuery ajax。之前页面做的也很丑，这次使用miniui前台框架完成。...
复制链接

扫一扫