ajax——把loginServle的响应改成json格式

创建登录servlet

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet{
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
//response.setHeader("content-type","text/html;charset=utf-8");//以前的html方式返回信息
response.setHeader("content-type","text/json;charset=utf-8");
String username=request.getParameter("username");
String password=request.getParameter("password");
Map<String,Object> map=new HashMap<>();
if("szl".equals(username)&&"123".equals(password)){
map.push("success",1);
map.push("errMsg","");
}else{
map.push("success",0);
map.push("errMsg","用户名或密码错误");
}
//创建json格式的mapper对象
ObjectMapper mapper=new ObjectMapper();
String json=mapper.writeValueAsString(map);
response.getWriter().write(json);
}
}

protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
doGet(request,response);
}

创建jsp登录页面LoginServlet

<script type="text/javascript">
//js登录方法
function login(){
//使用ajax往servlet发送get请求
//1.获取表单数据
var username=document.getElementById('username').value;
var password=document.getElementById('password').value;
//2.拼接表单数据
var params='username'+username+'&password'+password;
//3.URL
var url='${pageContext.request.contextPath}/LoginServlet?'+params;
//4.使用ajax发送get请求
//4.1创建一个请求对象
var request=new XMLHttpRequest();
//4.2调用get请求方法，调用open方法的时候，都用异步请求true
request.open('get',url,true);
request.send();
//4.3接收服务器的响应
request.onreadystatechange=function(){
console.log('准备状态码:'+request.readyState+'---响应状态码:'+request.status);
if(request.readState==4&&request.status==200){
//接收服务器响应的数据
var rspText=request.responseTest;
console.log(rspText);
var jsonObj=JSON.parse(rspText);
//获取span标签
var tipTag=document.getElementById('tip');
if(jsonObj.success==1){
tipTag.innerHTML='登录成功';
}else{
tipTag.innerHTML=jsonObj.errMsg;
}
}
}
}
</script>

 <span style="color:red" id='tip';></span>
<form>
用户名：<input type="text" name="username" id='''username'><br>
密码:<input type="password" type="password" name="password" id="password"><br>
<input type="button" value="登录" onclick="login()">
</form>