文章目录
十一.Javaweb---Ajax与jQuery请求
Ajax: 全称Asynchronous JavaScript And XML,异步的JavaScript和XML。
11.1 异步/同步请求
- 同步请求发送:
浏览器页面在发送请求给服务器,在服务器处理请求的过程中,浏览器页面不能做其他的操作。只能等到服务器响应结束后才能,浏览器页面才能继续做其他的操作。
- 异步交互:
可以在不重新加载整个页面 的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。
11.2 异步请求案例
案例一:
前端页面:
jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>未登录</h1>
<button>登录</button>
</body>
</html>
<script src="/js/jquery-1.10.2.min.js"></script>
<script>
$(function () {
var str = "kwh"
$("button").click(function () {
$.ajax({
url: "/ajax",
// data: "username=admin&password=123",
//传递json格式数据
data:{"username":"admin","password":123},
async: true, // true 异步, false 同步
tpype: "get",
datetype: "json",
success: function (res) {
alert(res);
$("h1").text(res);
},
error: function () {
alert("not_login is error");
}
});
// 异步执行 先弹出alert(str) 再执行alert(res)
alert(str);
});
});
</script>
后端服务:
java
@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String res = "";
//获取前端提交的参数
String username = request.getParameter("username");
String password = request.getParameter("password");
if(username.equals("admin") && password.equals("123")) {
res = "登录成功";
}
response.setCharacterEncoding("UTF-8");
response.getWriter().write(res);
}
}
案例二:
统一响应结果:
java
import com.alibaba.fastjson.JSONObject;
public class ResultJSON {
private Integer code;
private String msg;
public ResultJSON(Integer code, String msg) {
this.code = code;
this.msg = msg;
}
public String jsonString(){
return new JSONObject().toJSONString(this);
}
public static ResultJSON success(){
return new ResultJSON(200,"登录成功");
}
public static ResultJSON success(Integer code,String msg){
return new ResultJSON(code,msg);
}
public static ResultJSON error(){
return new ResultJSON(400,"登录失败");
}
public static ResultJSON error(Integer code,String msg){
return new ResultJSON(code,msg);
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
前端页面:
jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>未登录</h1>
<button>登录</button>
</body>
</html>
<script src="/js/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("button").click(function () {
$.ajax({
url: "/ajax02",
// data: "username=admin&password=123",
//传递json格式数据
data:{"username":"admin","password":"123"},
async: true, // true 异步, false 同步
tpype: "get",//使用的请求类型
datetype: "json",//响应回来的数据类型
success: function (res) {
alert(res);
$("h1").text(res);
},
error: function () {
alert("not_login is error");
}
});
});
});
</script>
后端服务
java
@WebServlet("/ajax02")
public class Ajax02Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String res = "";
String username = request.getParameter("username");
String password = request.getParameter("password");
response.setCharacterEncoding("UTF-8");
PrintWriter writer = response.getWriter();
if("admin".equals(username)&& "123".equals(password)) {
writer.write(ResultJSON.success().jsonString());
}else {
writer.write(ResultJSON.error().jsonString());
}
// response.getWriter().write(res);
}
}