1、jQuery AJAX简介
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/30fff5757bad61caf9627d61583580ed.png)
2、get和post请求
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3abb9ac804b8d0bfadeabb4ef59bb05e.png)
3、$.ajax()
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a8009efef498b390b066c60546135f3f.png)
4、示例代码
get.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#time,#res{
width: 300px;
height: 100px;
border: 1px solid #ff0;
}
</style>
</head>
<body>
<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var time=new Date();
$("#time").html(time.getHours()+":"+time.getMinutes()+":"+time.getSeconds());
$("#btn").click(function () {
$.get("get",function (data) {
$("#res").html(data);
});
});
});
</script>
<button id="btn">get请求</button>
<div id="time"></div>
<div id="res"></div>
</body>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#time,#res{
width: 300px;
height: 100px;
border: 1px solid #ff0;
}
</style>
</head>
<body>
<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var time=new Date();
$("#time").html(time.getHours()+":"+time.getMinutes()+":"+time.getSeconds());
$("#btn").click(function () {
$.post("post",{name:'zs',age:25},function (data) {
$("#res").html(data);
});
});
});
</script>
<button id="btn">post请求</button>
<div id="time"></div>
<div id="res"></div>
</body>
</html>
ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#time,#res{
width: 300px;
height: 100px;
border: 1px solid #ff0;
}
</style>
</head>
<body>
<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var time=new Date();
$("#time").html(time.getHours()+":"+time.getMinutes()+":"+time.getSeconds());
$("#btn").click(function () {
$.ajax(
{
url:"post",
data:{name:'lisi',age:'30'},
type:'post',
success:function (data) {
$("#res").html(data.res);
},
dataType:'json'
}
)
});
});
</script>
<button id="btn">ajax请求</button>
<div id="time"></div>
<div id="res"></div>
</body>
</html>
GetTest.java
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class GetTest {
@WebServlet(value = "/get")
public class PostTest extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter printWriter=resp.getWriter();
printWriter.write("hello ajax!!");
}
}
}
PostTest.java
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(value = "/post")
public class PostTest extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name=req.getParameter("name");
String age=req.getParameter("age");
String json="{\"res\":\"success\"}";
PrintWriter printWriter=resp.getWriter();
printWriter.write(json);
}
}