使用ajax向后台servlet发出请求并响应
博主初来乍到,希望大家能给博主更多的意见。
jsp页面代码
一下jsp代码使用了JavaScript或JQuery来实现
<%@ 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">
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Ajax异步请求</title>
</head>
<body>
<div class="header">
<input id="username" type="text" name="name" value="${Users.name}" onblur="namecase()"/>
<span id="hint"></span>
</div>
</body>
<script type="text/javascript">
// 以下是JQuery对ajax的实现方式
$('#username').on('blur',function(){
var usernameText = $('#username').val();
$.get('/JavaEEtest/RegisterServlet?usernametext='+usernameText,function(result){
$("#hint").html(result);
},'json')
})
// 以下是JavaScript对ajax实现方式
// var xmlHttp;
// function namecase(){
// var content=document.getElementById("username");
// if(content==""){
// return;
// }
// xmlHttp=createXMLHttp();
// var url="/JavaEEtest/RegisterServlet?usernametext="+content.value;
// xmlHttp.open("GET",url,true);
// xmlHttp.onreadystatechange=callback;
// xmlHttp.send(null);
// }
// function createXMLHttp(){
// var xmlHttp;
// if(window.XMLHttpRequest){
// xmlHttp=new XMLHttpRequest();
// }
// if(window.ActiveXObject){
// xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
// if(!xmlHttp){
// xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
// }
// }
// return xmlHttp;
// }
// function callback(){
// if(xmlHttp.readyState==4){
// if(xmlHttp.status==200){
// var result=xmlHttp.responseText;
// var json=eval("("+result+")");
// document.getElementById("hint").innerHTML=json;
// }
// }
// }
</script>
</html>
后台servlet代码
package servlet;
import java.io.IOException;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
/**
* Servlet implementation class RegisterServlet
*/
@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public RegisterServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//从前端获取usernametext的对象
String usernametext=request.getParameter("usernametext");
//校验输入内容
if(usernametext=="csdn"||usernametext.equals("csdn")){
String jsonarray= "['"+usernametext+"']";
response.getWriter().write(JSONArray.fromObject(jsonarray).toString());
}else{
response.getWriter().write(JSONArray.fromObject("['你输入的不是csdn']").toString());
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
注意:
jsonarray的格式是数组类型,如要输出string类型的:
"['此用户名可以使用']"
输入xx
输入csdn