Ajax：(asynchronous js and xml) 异步的js和xml 指的是一种交互方式 异步加载，客户端和服务端的数据交互更新在局部页面的技术 不用刷新整个页面(局部刷新)
优点：
- 局部刷新 效率更高
- 用户体验更好
ajax原理
ajax原理
使用:
1.不能使用表单获取a标签提交请求,否则会刷新整个页面，改用jQuery方式动态绑定来提交
2.不能转发到jsp 不然响应的是整个页面，同时会重新刷新页面 所以只返回数据就可以
- jsp代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(
function () {
var btn = $("#btn");
btn.click(function () {
$.ajax({
url:"/ajaxServlet",
type:"post",
dataType:"text",
data:"id=1",
success:function (data) {
var text = $("#text");
text.before("<span>" + data + "</span><br>");
}，
error:function () {
},
complete:function () {
print("请求完成");
}
});
});
}
)
</script>
</head>
<body>
${requestScope.str}
<input id="text" type="text"><br/>
<input id="btn" type="button" value="提交">
</body>
</html>
- servlet代码
@WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id = req.getParameter("id");
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
String str = "hello world";
//只返回str
resp.getWriter().write(str);
//相当于把ajax01.jsp的源码返回
// req.setAttribute("str",str);
// req.getRequestDispatcher("ajax01.jsp").forward(req,resp);
}
}
基于jQuery的ajax语法
$.ajax({
属性1:xxx,
属性2:xxx
})
属性列举
1.url
2.type:请求类型 默认get
3.data:请求参数
4.dateType:服务器返回的数据类型 text/json
5.success:请求成功回调函数
6.error:请求失败
7.complete:请求完成的回调函数 无论成功与否都是回调
服务响应返回对像
导入 json-lib jar包
User user = new User(1,"qihongwang",98.0);
//将java对象转为json格式 可以通过json-lib转化为json
resp.getWriter().write(user);
网友评论