一个比较简单的异步效果：处理数据时，页面不会改变
index.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<title>注册页面</title>
<script src="./js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function unique(){
var obj={
url:"./UniqueServlet?userName="+$("[name='user_name']").val(),
//请求UniqueServlet，将输入的内容（value值），赋值给自定义的userName变量
type:"get",//UniqueServlet执行get方法
success:function(data){
if(data=="0"){
$("#user_info").html("用户名重复，请再换一个");
//添加HTML代码，留给浏览器执行
}
}
};
$.ajax(obj);
}
</script>
</head>
<body>
<form >
<input placeholder="请输入用户名" name="user_name" onblur="unique()"/><span class="text" id="user_info" style="color: red;" onblur="clear()"></span><br>
<input type="password" name="password" placeholder="请输入密码"/><br>
<input type="password" name="password" placeholder="请输入确认密码"/><br>
<input type="button" value="注册" />
</form>
</body>
</html>UniqueServlet:
package com.jd;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UniqueServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String userName=request.getParameter("userName");//获取到index.jsp中的userName值
PrintWriter out =response.getWriter();
if("admin".equals(userName)) {
out.write("0");
}else {
out.write("1");
}
out.flush();
out.close();
}
}
效果：
591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
