ajax实现无刷新验证用户名是否存在

爱你的晓晴

爱你的晓晴

2016-02-19 16:57

今天图老师小编给大家展示的是ajax实现无刷新验证用户名是否存在,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

实现用的是jdbc+jsp+servlet,数据库用的是mysql

表就2个字段

实现原理获得text的值后,通过调用servlet查询数据库里是否存在,在通过xml传到前台

OperationName.java

response.setContentType("text/xml;charset=UTF-8")这句很重要,没有他前台获得不到xml,之前做的时候没有加

所以前台获得不到xml

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.Collection;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class OperationName extends HttpServlet
{

/** *//**
* Constructor of the object.
*/
public OperationName()
{
super();
}

/** *//**
* Destruction of the servlet. br
*/
public void destroy()
{
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

/** *//**
* The doGet method of the servlet. br
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
String names = request.getParameter("names");
Collection students = null;
Connection con = null;
Statement st = null;
ResultSet rs = null;
try
{
Class.forName("org.gjt.mm.mysql.Driver");
con = DriverManager.getConnection("jdbc:mysql:"+
"//127.0.0.1:3306/test?useUnicode=true&characterEncoding=GBK","root","eetrust");
st = con.createStatement();
rs = st.executeQuery("select count(*) from test where name='"+names+"'");
StringBuffer result = new StringBuffer();
result.append("OperationNames");
System.out.println(result);
while(rs.next())
{
int num = rs.getInt(1);
result.append("OperationName" + num + "/OperationName");
}
result.append("/OperationNames");
String responseHtml = result.toString();
response.setCharacterEncoding( "UTF-8");
response.setContentType("text/xml;charset=UTF-8");
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
response.getWriter().write(responseHtml);
}catch(Exception e)
{
e.printStackTrace();
}finally
{
try
{
rs.close();
st.close();
con.close();
}catch(Exception e)
{
e.printStackTrace();
}
}
}

/** *//**
* The doPost method of the servlet. br
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
this.doGet(request,response);
}

/** *//**
* Initialization of the servlet. br
*
* @throws ServletException if an error occure
*/
public void init() throws ServletException
{
// Put your code here
}

}
index.jsp

ajax("servlet/OperationName?names=" + newOperationName + "&form=form1");"&form=form1"可去掉

%@ page language="java" contentType="text/html;charset=GBK"%
%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
base href="%=basePath%"

titleMy JSP 'MyJsp.jsp' starting page/title

meta http-equiv="pragma" content="no-cache"
meta http-equiv="cache-control" content="no-cache"
meta http-equiv="expires" content="0"
meta http-equiv="keywords" content="keyword1,keyword2,keyword3"
meta http-equiv="description" content="This is my page"
!--
link rel="stylesheet" type="text/css" href="styles.css"
--
Script language="javascript"
!--
function ajax(url){
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
xmlHttp.onreadystatechange = processResponse;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function processResponse(){
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
if(xmlHttp.status==200)
{

var result = xmlHttp.responseXML;
var operationName = result.getElementsByTagName("OperationName");
if(operationName[0].firstChild.nodeValue == "0"){
document.all.ShowInfo.innerHTML = "B不存在B";
}else{
//alert(22222);
document.all.ShowInfo.innerHTML = "B存在B";
}
//document.all.ShowInfo.innerHTML = "font color="red"*/font";

}
return true;
}
}
function aaa()
{
var newOperationName = document.all.names.value;
ajax("servlet/OperationName?names=" + newOperationName + "&form=form1");
}
--
/Script
/head

body
form action="index.jsp"
table
tr
td
input type="text" name="names" value="" Onblur="aaa()"
/td
/tr
tr
TD bgcolor="#EEEEEE" id="ShowInfo"
asdas
/TD
/tr
tr
!--input type="button" onclick="aaa();" value="提交"--
/tr
/table
/form
/body
/html

web.xml

?xml version="1.0" encoding="UTF-8"?
web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
servlet
servlet-nameOperationName/servlet-name
servlet-classservlet.OperationName/servlet-class
/servlet

servlet-mapping
servlet-nameOperationName/servlet-name
url-pattern/servlet/OperationName/url-pattern
/servlet-mapping
/web-app

刚刚接触ajax不久,如有不合理的地方还望指点,谢谢!

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

ajax实现无刷新验证用户名是否存在

Web开发
ajax实现无刷新验证用户名是否存在

Ajax 用户名验证是否存在

Web开发
Ajax 用户名验证是否存在

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Ajax表单验证用户名是否存在

Web开发
Ajax表单验证用户名是否存在

Ajax——异步检查用户名是否存在示例

Web开发
Ajax——异步检查用户名是否存在示例

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Ajax简单应用,检测用户名是否存在

Web开发
Ajax简单应用,检测用户名是否存在

jquery ajax 检测用户注册时用户名是否存在

Web开发
jquery ajax 检测用户注册时用户名是否存在

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

防火墙有什么作用

防火墙有什么作用

VC通用控件编程之CSlider控件

VC通用控件编程之CSlider控件
下拉加载更多内容 ↓