关于把AJAX加入到注册登录demo中去

2018年3月10日 19:21:23 
第一次来SUBWAY真切地打代码. 这次的西红柿汤还是挺好喝的.

index.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

<title>ajax测试</title>

<script src="js/jquery-3.3.1.min.js"></script>

<script>

$(function () {

$("#loginName").bind("blur", function () {

var v_loginName = $(this).val()

$.ajax({

type: "POST", //类型

url: "checkName", //传送地址

data: "loginName=" + v_loginName, //数据

dataType: "json", //数据类型

success: function (data) { //成功回调,当响应一切正常时.

if (!data) {

$("#message").text("对不起,此账号已使用");

$("#message").attr("color","red");

} else {

$("#message").text("恭喜你,本账号可以使用");

$("#message").attr("color","green");

}

},

error: function(){ //当程序出错错误时执行error的回调方法

$("#message").text("对不起,服务器内部错误!请稍候再试!");

$("#message").attr("color","red");

}

})

})

})

</script>

</head>

<body>

账号: <input type="text" name="loginName" id="loginName"><span ><font id="message"></font></span>

</body>

</html>
CheckNameServlet:
package com.ykmimi.login;

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 java.io.IOException;

WebServlet(name = "CheckName")

public class CheckNameServlet extends HttpServlet {

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

//设置请求编码

request.setCharacterEncoding("UTF-8");

//获取请求数据

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

//简单判定

if ("admin".equals(loginName)) {

request.setAttribute("data",false);

request.getRequestDispatcher("data.jsp").forward(request,response);

return;

}

request.setAttribute("data", true);

request.getRequestDispatcher("data.jsp").forward(request, response);

}

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

super.doPost(request, response);

}

}

根据之上已经实现了Ajax的查询,并已经改为了从数据库直接查询:

package com.ykmimi.login;

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 java.io.IOException;

import java.io.PrintWriter;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

public class CheckNameServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

// 设置请求编码

request.setCharacterEncoding("UTF-8");

// 获取请求数据

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

//

String driverName = "org.mariadb.jdbc.Driver";

String DBUrl = "jdbc:mariadb://**.**.**.**:3306/*****";

String DBUser = "******";

String DBPassword = "************";

PrintWriter pw = response.getWriter();

try {

Class.forName(driverName);

Connection conn = DriverManager.getConnection(DBUrl, DBUser, DBPassword);

String sql = "SELECT * FROM user WHERE username = '" + userName + "'";

Statement stmt1 = conn.createStatement();

ResultSet name = stmt1.executeQuery(sql);

if (name.next()) {

request.setAttribute("data", false);

request.getRequestDispatcher("data.jsp").forward(request, response);

return;

}

request.setAttribute("data", true);

request.getRequestDispatcher("data.jsp").forward(request, response);

} catch (ClassNotFoundException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

super.doPost(request, response);

}

}

而界面是这样的,因为用户名下一个是js的onfocus方法,一个是刚加的jquery的blur方法,所以前者判定格式位数,后面从后台查询用户名是否注册,这里的问题是: 
用户名格式不正确时, 但未注册. 这种情形

用户名格式正确, 但已经注册. 这种情形

两个方式不同的js显示红绿相间,着实不够逻辑和好看. 今晚睡觉想想办法吧. :) 
2018年3月10日 22:41:56

关于使用jquery的Ajax结合java的Servlet后台判定用户名是否存在的更多相关文章

  1. 使用jquery 的ajax 与 Java servlet的交互

    由于是使用jquery的 所以别忘记导入jq 下面是jsp文件 <%@ page language="java" contentType="text/html; c ...

  2. jquery的ajax post 方法传值到后台，无法通过HttpServletRequest得到

    今天通过$.ajax({type:"post"});和$.post()方法传值到后台,发现servelet通过HttpServletRequest无法获取到值,但通过get方法却可 ...

  3. jquery 的 ajax 传输 数组 ，但后台无法获取的 原因 与 解决 办法

    1.前言 js传输数组到服务器 ,controller无法解析 ,打印结果是 null 2.原因 jQuery会调用jQuery.param序列化参数,源码是 jQuery.param( obj, t ...

  4. 用户管理的设计--4.jquery的ajax实现登录名的校验

    页面效果 鼠标失去焦点时,不需要刷新页面进行校验,判断登录名是否重复. 实现步骤 1.引入struts2-json-plugin-2.5.10.1插件包 2.页面使用jquery的ajax实现后台校验 ...

  5. Struts2 使用jQuery实现Ajax

    在jQuery中将Ajax相关的操作进行封装,使用时只需在合适的地方调用Ajax相关的方法即可,相比而言,使用jQuery实现Ajax更加简洁,方便 1.$.Ajax()可以通过发送Http请求加载远 ...

  6. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  7. 【ERROR】使用jquery的ajax出现error:readyState=4,status=500

    使用jquery的ajax出现error:readyState=4,status=500,ajax代码如下: $.ajax({ url : "../toBeFinMisManage/show ...

  8. jQuery的Ajax的跨域请求

    今天碰到一个Ajax跨域请求的问题,我把源码down下来,然后在服务器端写了一个http请求的代理(因为服务器端是不存在跨域问题的),说白了就是用BufferedReader写了个IO流,然后读取到目 ...

  9. jquery中ajax的使用

    Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进 ...

随机推荐

  1. mysql 数据库的操作

    1.数据库的查看 1)查看mysql中所有的数据库    "show databases;" mysql> show databases; +---------------- ...

  2. Oracle Golden Gate原理简介

    Oracle Golden Gate原理简介 http://www.askoracle.org/oracle/HighAvailability/20140109953.html#6545406-tsi ...

  3. 空类指针为什么可以调用类的成员函数 以及 A(){}和A();

    1. 代码及问题 #include <iostream> using namespace std; class A { public: A() {} //A *p = new A()时:此 ...

  4. Python一键安装全部依赖包

    requirements.txt用来记录项目所有的依赖包和版本号,只需要一个简单的pip命令就能完成. pip freeze >requirements.txt 然后就可以用 pip insta ...

  5. iOS 自定义日志输出

    在做iOS开发过程中,我们经常需要输出日志来查看某些数据是否打印出来,或者查看查个类是否被调用了. 系统默认的是NSLog(@"xxxx %d",1) ,但如果该APP要发布到商店 ...

  6. js模拟电梯操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 【Java】系统漏洞：关于用户登录后操作的注意事项

    项目背景: SpringMVC + Mybatis  + MySql数据库(javaWeb项目开发) 相关模块:登录,个人详细信息修改,订单详情查询 相关漏洞介绍: 1.登录的验证码:登录的验证码一定 ...

  8. linux字符处理命令 sort（部分转载）

    [root@LocalWeb01 ~]# sort /etc/passwd |less   (升序 ) [root@LocalWeb01 ~]# sort -r /etc/passwd |less ( ...

  9. 1mysql的安装

    1.mysql的安装:(1).在'开始'出搜索 'cmd';(2).打开mysql所在磁盘和文件 并安装 d: d:\>cd mysql d:\mysql>cd bin d:\mysql\ ...

  10. hdu5145 莫队算法

    这题说的是个了n个数字 然后 在L 和R 区间内的数字的排列有多少种方案, 这里我们通过 将 这n长度的字符串 分成sqrt(n) 块然后 一个属性 他们的l 属于 那个快  以这个为第一关键字 ,然 ...