==================
Ajax的方式提交,不能跳转页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//这个函数是网上复制过来的
function ajaxFunction()
{
var request;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
request = new XMLHttpRequest();
} else {// code for IE6, IE5
request = new ActiveXObject("Microsoft.XMLHTTP");
}
return request
}
function get()
{
//获取到ajax对象
var request=ajaxFunction();
//这个true代表异步
request.open("GET","_001_?name=aa&age=20",true);
// 获取响应的消息,onreadystatechange是状态发生改变的事件,当服务器发送了消息回来
// 这个事件就会触发.
request.onreadystatechange=function()
{
if(request.readyState==4 && request.status==200)
{
//responseText储存的是服务器发过来的消息,还有很多request参数看文档
alert(request.responseText);
}
}
//发送请求
request.send();
}
function post()
{
//获取到ajax对
var request=ajaxFunction();
//这个true代表异步
request.open("POST","_001_",true);
// 获取响应的消息,onreadystatechange是状态发生改变的事件,当服务器发送了消息回来
// 这个事件就会触发.
request.onreadystatechange=function()
{
if(request.readyState==4 && request.status==200)
{
//responseText储存的是服务器发过来的消息,还有很多request参数看文档
alert(request.responseText);
}
}
//post方式需要设置请求头
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//post发送请求,参数填在这里
request.send("name=aa&age=20");
}
</script>
</head>
<body>
<h3>
<!-- 凡是ajax都不能跳转页面 -->
<a href="" onclick="get()">使用Ajax方式发送get请求</a><br/>
<a href="" onclick="post()">使用Ajax方式发送post请求</a>
</h3>
</body>
</html>测试的servlet
public class _001_get_post extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
String name=request.getParameter("name");
String age=request.getParameter("age");
System.out.println("这是servlet "+name+" "+age);
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("给客户端"); //这里写出的在上面的responseText会有
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
System.out.println("收到post请求");
doGet(request, response);
}
}下面是简单的校验用户名的例子
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function ajaxFunction()
{
var request;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
request = new XMLHttpRequest();
} else {// code for IE6, IE5
request = new ActiveXObject("Microsoft.XMLHTTP");
}
return request
}
function checkUser()
{
//获取输入框的数值
var username= document.getElementById("username").value;
//获取到ajax对对象
var request=ajaxFunction();
//这个true代表异步
request.open("POST","_002_",true);
// 获取响应的消息,onreadystatechange是状态发生改变的事件,当服务器发送了消息回来
// 这个事件就会触发.
request.onreadystatechange=function()
{
if(request.readyState==4 && request.status==200)
{
//responseText储存的是服务器发过来的消息,还有很多request参数看文档
if(request.responseText==1)
{
document.getElementById("span1").innerHTML="<font color='red'>用户名已存在!</font>"
}
else
{
document.getElementById("span1").innerHTML="<font color='green'>用户名可用!</font>"
}
}
}
//post方式需要设置请求头
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送用户名过去
request.send("username="+username);
}
</script>
</head>
<body>
<table>
<tr>
<td>用户名: </td>
<!--这里失去焦点就会去执行函数-->
<td><input type="text" name="username" id="username" onblur="checkUser()"/>
<span id="span1"></span>
</td>
</tr>
</table>
</body>
</html>这是servlet,dao就不写了(只需要判断是否存在就行了)
public class _002_Check extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
try
{
//从网页过来数据,肯定要编码一下
request.setCharacterEncoding("utf-8");
//获取用户名并且判断
String name=request.getParameter("username");
UserDao dao=new UerDaoImp();
System.out.println("用户名收到"+name);
boolean isExist=dao.checkUser(name);
//设置编码
response.setContentType("text/html;setchar=utf-8");
if(isExist)
{
//写成状态,1代表用户名存在,2代表不存在,可以注册
response.getWriter().println(1);
}else {
response.getWriter().println(2);
}
} catch (SQLException e)
{
e.printStackTrace();
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGet(request, response);
}
}