ajax简单运用
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title></title>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$(":input[name='username']").change(function() {
var val = $(this).val();
val = $.trim(val); //去除填写数据的空格
if (val != "") { //如果填写数据不为空，就发送ajax数据请求
var url = "${pageContext.request.contextPath}/userName"; //请求地址为这个servlet地址
var args = {
"userName" : val,
"time" : new Date() //解决缓存问题
};
$.post(url, args, function(data) {
$("#message").html(data); //加入在这个id号里面
});
}
});
})
</script>
</head>
<body>
<form action="" method="post">
username:<input type="text" name="username" />
<div id="message"></div> <!-- 预留空格写入后台返回的数据 -->
<input type="submit" value="Submit">
</form>
</body>
</html>
servlet
package ajax; import java.io.IOException; import java.util.Arrays; 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; /** * Servlet implementation class UserNameServlet */ @WebServlet("/userName") public class UserNameServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<String> userNames = Arrays.asList("AAA", "BBB", "CCC"); //从数据库读取出来的数据 String userName = request.getParameter("userName"); //得到前台输入的值 String result = null; //定义返回的值 if (userNames.contains(userName)) { //判断数据库是否有前台输入的值 result = "<font color='red'>可以登录</font>"; //有就将这个值返回到前台页面 } else { result = "<font color='green'>不可以登陆</font>"; //没有将这个值返回到页面 } response.setContentType("text/html;charset=UTF-8"); //设置返回值的类型，设置编码 response.setCharacterEncoding("utf-8"); //设置编码 response.getWriter().print(result); //写在页面上 } }
