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>