文章目录
- 十一.Javaweb—Ajax与jQuery请求
- 11.1 异步/同步请求
- 11.2 异步请求案例
- 案例一：
- 案例二：
十一.Javaweb—Ajax与jQuery请求
Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。
11.1 异步/同步请求
【往期文章】
- 同步请求发送:
浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。
- 异步交互：
可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
11.2 异步请求案例
案例一：
前端页面：
<%@ 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>
后端服务：
@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {@Overrideprotected 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);}
}
案例二：
统一响应结果：
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;}
}
前端页面：
<%@ 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>
后端服务
@WebServlet("/ajax02")
public class Ajax02Servlet extends HttpServlet {@Overrideprotected 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);}
}
区别)
