ajax.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function () {
let $input = $("#input");
let $p = $("p");
//按钮点击事件
$("#btn").click(function () {
$.ajax({
//一个用来包含发送请求的URL字符串
url: "/test",
//请求方式
type: "get",
//发送至服务器的 key/value 数据
data:{"name":"zs","age":18},
//AJAX 请求成功时执行函数
success: function (data) {
$p.text(data);
}
});
});
</script>
</head>
<body>
<p>这是一个异步加载页面</p>
<button id="btn">我是一个按钮</button>
</body>
</html>
Servlet页面
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;
/**
* @author Lotus
*/
//工具使用的是IDEA,servlet使用的是注解的方式,MyEclipse可以配置web.xml文件
@WebServlet(name = "ajax", urlPatterns = "/test")
public class AjaxServletTest extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//获取ajax传递过来的值
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
//控制台输出值
System.out.println("姓名:" + name + "\t年龄:" + age);
response.getWriter().println("异步加载");
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
效果图
页面加载完毕
按钮点击后
更新输入框数据
ajax.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function () {
let $input = $("#input");
let $p = $("p");
//当按钮被松开时,发生 keyup 事件
$input.keyup(function () {
let val = $input.val();
//给p标签设置值
$p.text(val);
});
});
</script>
</head>
<body>
<p>这是一个异步加载页面</p>
<button id="btn">我是一个按钮</button>
<br/>
<input type="text" id="input">
</body>
</html>
效果图
页面加载完毕后
随机输入内容后,上面p标签中的内容实时更新