Html mysql 登录验证_html5+jquery+mysql登陆验证 | 学步园

该针对网站登录流程的实例，详细叙述登录过程的实现。环境：myeclipse+mysql。

登录页面是一个简单的网页，使用form表单进行提交。

对于表单的提交，使用的是jqueryForm插件。jQuery Form Plugin 能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。

插件里面主要的方法,ajaxForm和ajaxSubmit,

能够从form组件里采集信息确定如何处理表单的提交过程。两个方法都支持众多的可选参数，能够让你对表单里数据的提交做到完全的控制。这让采用AJAX方式提交一个表单的过程简单的不能再简单了！jqueryForm官网

用户登录

$(document).ready(function(){

var options = {

beforeSubmit: showRequest, // pre-submit callback

success: showResponse // post-submit callback

};

$('#loginInfo').ajaxForm(options);

});

// pre-submit callback

function showRequest(formData, jqForm, options) {

var queryString = $.param(formData);

alert('About to submit: \n\n' + queryString);

return true;

}

function showResponse(responseText, statusText, xhr, $form) {

if(responseText == 1)

{

window.location.href="验证通过需要跳转的地址";

}

else

{

alert(responseText);

window.location.href="http://www.renren.com";

}

alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +

'\n\nThe output div should have already been updated with the responseText.');

}

.loginInfo{

background-color:#09F;

width:20%;

}

username

password

后台：

servlet：接收前台传递的用户信息，调用java类LoginHandle的方法 loginHandle进行数据库匹配

public void service(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html;charset=utf-8");

PrintWriter out = response.getWriter();

String username = request.getParameter("username");

String password = request.getParameter("password");

String user = LoginHandle.loginHandle(username,password);

if(user.equals("匹配成功"))

{

user = "1";

}

out.println(user);

out.close();

}

loginHandle方法：通过ConnectionHelper工具类连接数据库，并根据servlet传入的用户信息进行数据查询，返回查询结果。

public static String loginHandle(String name,String password){

String match = "";

System.out.println(name+""+password);

Connection conn = ConnectionHelper.getConnection();

try {

Statement statement = conn.createStatement();

String sqlForDomainName = "select * from login where name = '"+name+"'";

ResultSet domainNameResultSet = statement.executeQuery(sqlForDomainName);

if(domainNameResultSet.next()) {

System.out.println(domainNameResultSet.getString("password"));

if(password.equals(domainNameResultSet.getString("password")))

{

match = "匹配成功";

}

else

{

match = "密码错误，请重新输入！";

}

}

else

{

match = "用户名不存在！";

}

conn.close();

} catch (SQLException e) {

e.printStackTrace();

} catch (Exception e) {

e.printStackTrace();

}

System.out.println(match);

return match;

}

ConnectionHelper工具类：

package javacode;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

public class ConnectionHelper

{

public static Connection getConnection()

{

String driver = "com.mysql.jdbc.Driver";

String url = "jdbc:mysql://127.0.0.1:3306/testjs";

String user = "root";

String password = "admin";

Connection conn = null;

try {

Class.forName(driver);

conn = DriverManager.getConnection(url, user, password);

if (!conn.isClosed())

System.out.println("Succeeded connecting to the Database!");

} catch (ClassNotFoundException e) {

System.out.println("Sorry,can`t find the Driver!");

e.printStackTrace();

} catch (Exception e) {

e.printStackTrace();

}

return conn;

}

}

数据库，只是一个简单的用户信息表。

注意事项：

初学web工程，在编写过程中遇到一些问题。

1、页面中jquery和js包不能重复导入，否则会报错。

2、数据类型，一直以为responseText返回的就是string类型。开始用responseText == "1"做判断是错误的。