关于把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字符集设置及字符转换（latin1转utf8）

    MySQL字符集设置及字符转换(latin1转utf8) http://blog.chinaunix.net/uid-25266990-id-3344584.html  MySQL字符集设置及字符转换 ...

  2. AngularJS 事件广播与接收 $emit $broadcast $on

    AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...

  3. DirectShow SDK下载

    http://blog.csdn.net/zx3517288/article/details/50547243 Q : GRMSDK_EN_DVD.iso 5 67.3MBGRMSDKIAI_EN_D ...

  4. iOS UI基础-5.0 QQ框架（Storyboard）

    1.拉入TabBarController和4个Navigation 2.TabBarController关联Navigation 3.设置消息,拉入一个Button,设置背影 4.联系人,拉入一个Se ...

  5. div 在css中透明度怎么调？

    可以用这个属性:opacity: 0.95;opacity为属性,0.95为值(其中值的范围在0~1之间) 参考:https://zhidao.baidu.com/question/689118188 ...

  6. 更换mysql数据库的datadir目录

    更换过程如下: 1.新建指定的datadir目录,这里举例如:E:/mysql_datadir/data. 2.关闭mysql57服务器. 3.将原来的datadir目录下面的所有文件拷贝到E:/my ...

  7. css+table

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 排序的hashmap（guava）

    1.mvnrepository上搜索 guava.并引用其jar包 类似compile "com.google.guava:guava:18.0" 测试代码 Builder< ...

  9. java常用类总结

    0.jar包下载地点 http://mvnrepository.org/ 1.序列化反序列化Object代码 百度云:http://pan.baidu.com/disk/home#list/path= ...

  10. swift 错误集锦

    1.注册 NIB 出现错误 // error:'registerNib(_:forCellReuseIdentifier:)' has been renamed to 'register' (_:fo ...