<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习25篇(ajax之get)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
<style type="text/css">
div {
width: 300px;
height: 200px;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
<h3 style="color: #cd1636;">JQuery学习25篇(ajax之get)</h3>
用户名:<input id="uName" name="userName">
<span id="prompt"></span>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(#uName).blur(function() {
console.log(this.value, $(this).val());
var url = TestUserList?name= + $(this).val();
if($(this).val().length == 0){
$(#prompt).html(<font color="red">用户名不能为空</font>);
return;
}
$.get(url, function(serverReturnData){
console.log(serverReturnData);
console.log(typeof serverReturnData, serverReturnData.length);
//trim()方法是用来删除字符串两端的空白字符并返回,缺陷：只能去除字符串两端的空格，不能去除中间的空格
var serverReturnDataStr = serverReturnData.trim();
console.log(serverReturnDataStr);
console.log(typeof serverReturnDataStr, serverReturnDataStr.length);
console.log(serverReturnData == true, serverReturnDataStr == true);
if(serverReturnDataStr == true){
$(#prompt).html(<font color="red">用户名已存在</font>);
}else{
$(#prompt).html(<font color="green">用户名可用</font>);
}
// console.log($(this));
});
});
</script>
</html>
package com.test;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 使用ajax检测用户名是否存在
*/
@WebServlet("/TestUserList")
public class TestUserList extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
String userName = request.getParameter("name");
System.out.println("userName = " + userName);
List<String> userList = new ArrayList<String>();
userList.add("令狐冲");
userList.add("韦小宝");
userList.add("郭靖");
userList.add("张无忌");
userList.add("zhangsan");
userList.add("lisi");
boolean userExist = userList.contains(userName);
System.out.println("userExist = " + userExist);
PrintWriter pw = response.getWriter();
pw.print(userExist);
pw.flush();
pw.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
