1.$.ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun(){
$.ajax({
//请求路径
url:"ajaxServlet",
//请求方式
type:"POST",
//请求参数
data:{"username":"jack","age":30},
//响应成功后的回调函数
success:function(data){
alert(data);
},
//如果响应出现错误会执行的回调函数
error:function(){
alert("出错啦");
},
//设置接收的响应数据格式
dataType:"text"
});
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();"/>
</body>
</html>
AjaxServlet.java
import java.io.IOException;
@javax.servlet.annotation.WebServlet("/ajaxServlet")
public class AjaxServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
//1.获取请求参数
String username = request.getParameter("username");
//打印username
System.out.println(username);
//响应
response.getWriter().write("hello:"+username);
}
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
this.doPost(request, response);
}
}
2.$.get()
$.get(url, [data], [callback], [type])
参数:
url:q请求路径
data:请求参数
callback:回调函数
type:响应结果的类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun(){
$.get("ajaxServlet",{username:"rose"},function(data){
alert(data);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();"/>
</body>
</html>
3.$.post()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun(){
$.post("ajaxServlet",{username:"rose"},function(data){
alert(data);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();"/>
</body>
</html>