关于把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. Java——文件操作字符流和字节流的区别

    转:http://blog.csdn.net/joephoenix/articles/2283165.aspx java的IO流分两种流 字节流 InputStream OutputStream 字符 ...

  2. python中执行shell命令行read结果

    +++++++++++++++++++++++++++++ python执行shell命令1 os.system 可以返回运行shell命令状态,同时会在终端输出运行结果 例如 ipython中运行如 ...

  3. Vue 数据绑定语法

    数据绑定语法 Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板, ...

  4. 十天精通CSS3(3)

    颜色之RGBA RGB是一种色彩标准,是由红(R).绿(G).蓝(B)的变化以及相互叠加来得到各式各样的颜色.RGBA是在RGB的基础上增加了控制alpha透明度的参数. 语法: color:rgba ...

  5. phpstorm中FTP自动同步功能

    首先打开PhpStorm软件,新建个项目完成以后,找到Tools,  找到 Tools->Deployment->configruation点击进行设置,  点击configruation ...

  6. [LeetCode] 301. Remove Invalid Parentheses_Hard tag:BFS

    Remove the minimum number of invalid parentheses in order to make the input string valid. Return all ...

  7. Mantle 与Injection

    本来Injection可以本地打补丁实时修改代码,但是不知道Mantle的数据类为何不能打补丁,可能因为Mantle利用了很多运行时的技术吧.

  8. VMware coding Challenge：Date of Weekday

    这道题再次证明了这种细节的题目,画个图容易搞清楚 import java.util.Scanner; public class Solution2 { static int DateOfWeekday ...

  9. Q_UNUSED

    Q_UNUSED() 没有实质性的作用,用来避免编译器警告 void func( int a) { Q_UNUSED(a); //函数体内没有使用a,避免编译器警告 }

  10. Nature重磅：Hinton、LeCun、Bengio三巨头权威科普深度学习

    http://wallstreetcn.com/node/248376 借助深度学习,多处理层组成的计算模型可通过多层抽象来学习数据表征( representations).这些方法显著推动了语音识别 ...