关于把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. C#基础笔记(第十一天)

    1.复习字符串(1)字符串的不可变性(2)字符串的方法:1)Split() 分割 把字符串中不想要的内容分割掉 返回一个字符串类型的数组 可以添加StringSplitOption.RemoveEmp ...

  2. HashMap（不是线程安全）与ConcurrentHashMap（线程安全）

    HashMap不是线程安全的 ConcurrentHashMap是线程安全的 从JDK1.2起,就有了HashMap,正如前一篇文章所说,HashMap不是线程安全的,因此多线程操作时需要格外小心. ...

  3. 使用gradle构建多模块springboot项目,打jar包

    官方文档: https://spring.io/guides/gs/rest-service/  参考:http://blog.csdn.net/u013360850/article/details/ ...

  4. Kafka核心组件

    一.Kafka核心组件及工作方式 Producer :消息生产者,就是向kafka broker发消息的客户端 Consumer :消息消费者,向kafka broker取消息的客户端 Topic : ...

  5. 76. Minimum Window Substring（hard 双指针）

    Given a string S and a string T, find the minimum window in S which will contain all the characters ...

  6. UVA 475

    /* 通过这题 学会了 两个词组 immediately to the left 是左邻的意思 immediately to the right 这个是右邻的意思 */ #include <io ...

  7. CPU VS GPU(性能调优 12.1)

    CPU VS GPU 关于绘图和动画有两种处理的方式:CPU(中央处理器)和GPU(图形处理器).在现代iOS设备中,都有可以运行不同软件的可编程芯片,但是由于历史原因,我们可以说CPU所做的工作都在 ...

  8. Swift Optional

    拆包和解包的原因: 其实所谓的 nil 就是 Optional.None, 非 nil 就是Optional.Some, 然后会通过Some(T)包装(wrap)原始值,这也是为什么在使用 Optio ...

  9. 复制控件出错--提示XX控件不存在

    有时候比较喜欢复制粘贴,但是结果就是,经常出现XX控件找不到,或者不存在之类的话~~ 错误如下: 在相当郁闷的时候,尝试了一种很土土的方法,就是直接新建一个同名新页面,把前台和后台的代码复制进去~~ ...

  10. mybatis打印sql日志配置

    <settings> <!-- 打印查询语句 --> <setting name="logImpl" value="STDOUT_LOGGI ...