1.引入jquery文件
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- 默认使用cdn加速，如果用户浏览器缓存没有，则加载本地jquery-->
<script>window.jQuery || document.write('<script src="../../js/jquery.js"><\/script>')</script>
2. 调用ajax
<script>
$(function () {
$("#ajaxGet").click(function(){
$.ajax({
url:"../../ajaxServlet",
type:'post',
// dataType:'application/json',
data:{"name":"zhangsan"},
success:function (data) {
// alert("success")
console.log(data)
alert((data))
},
error:function (e) {
alert("error")
}
})
})
})
</script>
说明：ajax的参数url对应到你想请求的servelt
html中只有一个button
<body>
<button id="ajaxGet">测试</button>
</body>
完整的html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- 默认使用cdn加速，如果用户浏览器缓存没有，则加载本地jquery-->
<script>window.jQuery || document.write('<script src="../../js/jquery.js"><\/script>')</script>
<script>
$(function () {
$("#ajaxGet").click(function(){
$.ajax({
url:"../../ajaxServlet",
type:'post',
// dataType:'application/json',
data:{"name":"zhangsan"},
success:function (data) {
// alert("success")
console.log(data)
alert((data))
},
error:function (e) {
alert("error")
}
})
})
})
</script>
</head>
<body>
<button id="ajaxGet">测试</button>
</body>
</html>
3. servelt响应ajax的请求
@WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println(req.getParameter("name"));
// String s= "{\"name\":\"张三\",\"password\":\"123456\"}";
String s = "hello world！";
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/plain; charset=utf-8");
resp.getWriter().write(s);//写入到返回结果中
//完成，执行到这里就会返回数据给前端，前端结果为success，调用success里面的内容
}
}
4.启动tomcat，测试ajax请求是否成功
点击button
激动人心的时刻，熟悉的hello world！他来了！他真的来了！
ajax之旅从此开始，一切只是在这个基础上添砖加瓦，异步请求动态更新网站内容指日可待，冲冲冲。
网友评论