前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.6.0.js"></script>
<script>
$(function (){
$("input").blur(function () {
//第一种ajax
$.ajax({
"url":"/test/doajax",
//通过流或者参数获取后台都可以实现
"data":"name="+ $("input").val(),
"type":"post",
"dataType":"text",
success:function (res) {
$("div").html(res);
}
})
//第二种 前台发json对象后台返回文本
//get方法
var user = {};
user.username = $("input").val();
$.get("/test/doajax",user,function (data) {
$("div").html(data.username);
},"json");
//post方法
var user = {};
user.username = $("input").val();
$.post("/test/doajax",user,function (data) {
$("div").html(data.username);
},"json");
//化简把json参数换到前面getJson
var user = {};
user.username = $("input").val();
$.getJSON("/test/doajax",user,function (data) {
$("div").html(data.username);
});
//第三种
var user = {};
user.username = $("input").val();
$.ajax({
"url":"/test/doajax",
"data":user,
"type":"post",
"dataType":"json",
success:function (res) {
$("div").html(res.username);
},
error:function () {
alert("出错了!");
}
})
});
//第四种 简化不易读懂 所有操作在后端完成
$("div").load("/test/load");
});
</script>
</head>
<body>
<input type="text">
<div></div>
</body>
</html>
Servlet
@WebServlet("/doajax")
public class DoAjax extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
/*BufferedReader br = new BufferedReader(new InputStreamReader(req.getInputStream(),"utf-8"));
String s = br.readLine();*/
String name = req.getParameter("username");
System.out.println(name);
User user = new User(name,"666");
PrintWriter out = resp.getWriter();
out.write(JSON.toJSONString(user));
/* out.write(name);*/
out.flush();
out.close();
}
}
@WebServlet("/load")
public class DoLoad extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
List<User> list = new ArrayList<>();
list.add(new User("tp1","111"));
list.add(new User("tp2","222"));
list.add(new User("tp3","333"));
String str = "<table>";
for (User u:list) {
str+="<tr>";
str+="<td>";
str += u.getUsername()+"--"+u.getPassword();
str+="</td>";
str+="</tr>";
}
str += "</table>";
PrintWriter out = resp.getWriter();
out.write(str);
out.flush();
out.close();
}
}
User类
package vo;
public class User {
private String username;
private String password;
public User(String username, String password) {
this.username = username;
this.password = password;
}
public User() {
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "User{" +
"username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
}