关于把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. 【Python】【web.py】python web py入门-4-请求处理（上）

    python web py入门-4-请求处理(上) 2017年09月05日 23:07:24 Anthony_tester 阅读数:2907 标签: webpy入门请求处理 更多 个人分类: Pyth ...

  2. JVM学习笔记-内存管理

    第一章 内存分配 1. 内存区域.     方法区和堆(线程共享),程序计数器 , VM栈 和 本地方法栈(线程隔离).     1) java虚拟机栈:线程私有.描写叙述的是java方法执行的内存模 ...

  3. druid.io本地集群搭建 / 扩展集群搭建

    druid.io 是一个比较重型的数据库查询系统,分为5种节点 . 在此就不对数据库进行介绍了,如果有疑问请参考白皮书: http://pan.baidu.com/s/1eSFlIJS 单台机器的集群 ...

  4. 【剑指offer】栈的压入、弹出序列

    一.题目: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该 ...

  5. [py]flask从0到1-模板/增删改查

    flask知识点 1.后端渲染html到前端 render_template 2.后端获取前端数据 request.args.get 3.前端获取后端数据 模板 4.警示消息 flash {{ get ...

  6. [LeetCode] 827. Making A Large Island

    In a 2D grid of 0s and 1s, we change at most one 0 to a 1. After, what is the size of the largest is ...

  7. [LeetCode] 690. Employee Importance_Easy tag: BFS

    You are given a data structure of employee information, which includes the employee's unique id, his ...

  8. git 下载单个文件 已经添加多个远程服务器

    175down vote It is possible to do (in the deployed repository) git fetch followed by git checkout or ...

  9. python中的re模块中的向后引用和零宽断言

    1.后向引用 pattern = re.compile(r"(\w+)")#['hello', 'go', 'go', 'hello'] # pattern = re.compil ...

  10. dedecms开启多站点

    dedecms开启多站点后,填写域名才能正确的地址 if ( ! function_exists('GetFileUrl')) { function GetFileUrl($aid,$typeid,$ ...