Javaweb05-Ajax
1、基于jQuery的Ajax
1.1 基本Ajax
| 参数 | 说明 |
|---|---|
| url | 请求地址 |
| type | 请求类型 |
| data | 请求参数 |
| dataType | 返回参数 |
| success | 成功处理函数 |
| error | 错误处理函数 |
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
$(function(){
//强调：基于javascript实现的ajax用法，比较繁琐，不需要掌握
//需要掌握的是基于jQuery方式使用的Ajax
//当用户登录，输入用户名后，失去焦点，校验登录用户名再系统中是否被使用
$("#uname").blur(function(){
//alert($(this).val());
//获取输入的用户名,并实现非空校验
var userName = $(this).val();
if(userName == null || userName == ""){
alert("用户名不能为空");
return;
}
//基于jAuery的Ajax用法-基本用法
$.ajax({
"url" : "<%=request.getContextPath()%>/checkUserName",
"type" : "post",
"data" : {"userName" : userName},
"dataType" : "text",
"success" : function(data){
//alert(JSON.parse(data));
if(JSON.parse(data)){
$("#showMsg").html("用户名存在").css({"color":"red"});
}else{
$("#showMsg").html("用户名可用").css({"color":"#2ceb0a"});
}
},
"error" : function(){
$("#showMsg").html("未知错误");
}
});
</script>
1.2 get提交Ajax
语法:$.get(url,params,success);
//基于JQuery的Ajax用法-扩展用法1，简写Get方，Ajax请求
//语法:$.get(url,params,success)
$.get("<%=request.getContextPath()%>/checkUserName",{"userName":serName},function(data){
if(JSON.parse(data)){
$("#showMsg").html("用户名存在get").css({"color":"red"});
}else{
$("#showMsg").html("用户名可用get").css({"color":"#2ceb0a"});
}
});
1.3 post提交Ajax
语法:$.post(url,params,success);
//基于JQuery的Ajax用法-扩展用法1，简写Get方，Ajax请求
//语法:$.post(url,params,success)
$.post("<%=request.getContextPath()%>/checkUserName",{"userName" : userName},function(data){
if(JSON.parse(data)){
$("#showMsg").html("用户名存在post").css({"color":"red"});
}else{
$("#showMsg").html("用户名可用post").css({"color":"#2ceb0a"});
}
});
1.4 请求处理
checkUserName 对应的处理代码；通过Response返回结果，前端接收到结果并进行处理；
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//后台接收用户名,校验是否重复
//获取用户参数
String userName = req.getParameter("userName");
System.out.println("AjaxServlet userName=>>"+userName);
//定义返回的结果
boolean result= false;
//模拟调用业务，查询当前用户名再数据中是否有记录
List userNames = Arrays.asList("kh96","kgc","Ajax");
if(userNames.contains(userName)) {
result = true;
}
//异步请求响应结果,注意println不可以用，返回的结果会带\n
System.out.println("AjaxServlet result==>"+result);
resp.getWriter().println(result);
}
2、登录请求处理，并展示数据
2.1 登录页面
loginAnime.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
登录页面
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#uname").blur(function(){
//异步请求校验用户名
//基于jAuery的Ajax用法-基本用法
$.post("<%=request.getContextPath()%>/checkUserName",{"userName" :$("#uname").val()},function(data){
if(JSON.parse(data)){
$("#showMsg").html("用户名存在").css({"color":"#2ceb0a"});
}else{
$("#showMsg").html("用户名不存在").css({"color":"red"});
}
});
});
$("form").submit(function(){
//用户名非空校验
var userName = $("#uname").val();
//alert(userName);
if(userName == null || userName == ""){
alter("用户名不能为空");
//submi事件，接收false结果，会自动取消表单的提交
return false;
}
//密码非空
var userPwd = $("#upwd").val();
//alert(userPwd);
if(userPwd == null || userPwd == ""){
alter("用户密码不能为空");
//submi事件，接收false结果，会自动取消表单的提交
return false;
}
//异步提交登录请求，如果交谈用户信息输入正确，提示登录成功，宁跳转到动漫管理首页，否则提示登录失败
$.post("<%=request.getContextPath()%>/loginAnime",{"userName" : userName,"userPwd":userPwd},function(data){
if(JSON.parse(data)){
alert("登录成功");
//请求后台获取动漫列表数据
//location.href = "<%=request.getContextPath()%>/animes";
//请求列表页面，使用Ajax解析json数据
location.href = "animeListJson.jsp";
}else{
alert("登录失败");
}
});
//由于使用了Ajax进行了异步登录请求，此处表单就不能再提交,否者表达再提交会出错
return false;
});
});
</script>