1.jsp页面中
<input class="input-text" type="text" name="loginName" value="" οnblur="checkLoginName(this)"/>
2.js页面
//注意把req设置为全局变量,否则onchange事件不执行
<input class="input-text" type="text" name="loginName" value="" οnblur="checkLoginName(this)"/>
2.js页面
//注意把req设置为全局变量,否则onchange事件不执行
var req = null;
function checkLoginName(obj) {
alert("事件执行");
var n = obj.value;
var vn = null;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else {
req = new ActiveXObject("Microsoft.XMLHttp");
}
if (!req)
return;
req.open("POST", "servlet/CheckLoginName", true);//true表示同步,false表示异步
req.onreadystatechange = handleStateChange
req.send(n);
}
function handleStateChange(){
alert(req.readyState);
if (req.readyState == 4 && req.status == 200) {
vn = req.responseText;
if (vn == "用户名已经存在!") {
$("Erro1").innerHTML = vn;
} else {
$("Erro1").innerHTML = "";
}
}
}
3.servlet页面CheckLoginName中
public class CheckLoginName extends HttpServlet{
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//注意这里要设置charset否则跳转时会出现乱码
response.setContentType("text/plain;charset=GBK");
request.setCharacterEncoding("GBK");
BufferedReader br = request.getReader();
StringBuilder sb = new StringBuilder();
String line = null;
while ((line = br.readLine()) != null) {
sb.append(line);
}
br.close();
Biz b = new Biz();
//biz中的方法检测用户名是否已经存在
if (b.checkExistsLoginName(sb.toString())) {
response.getWriter().write("用户名已经存在!");
} else {
System.out.println(sb.toString());
response.getWriter().write(sb.toString());
}
}
}
4.web.xml
<servlet>
<servlet-name>test</servlet-name>
<servlet-class>com.huyao.Test</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test</servlet-name>
<url-pattern>servlet/CheckLoginName</url-pattern>
</servlet-mapping>