三种常见的请求
请求方式 | 语法 |
---|---|
GET请求 | $.get(url, [data], [callback], [type]) |
POST请求 | $.post(url, [data], [callback], [type]) |
AJAX请求 | $.ajax([settings]) |
简单的get请求
参数名称 | 解释 |
---|---|
url | 请求的服务器端url地址 |
data | 发送给服务器端的请求参数 ,格式可以是key=value,也可以是js对象 |
callback | 当请求成功后的回掉函数,可以在函数体中编写我们的逻辑代码 |
type | 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defau |
<script type="text/javascript">
function sendRequest(){
$.get(
"/AjaxDemo/ajaxServlet",
"name=tom&age=33",
function(data){
alert(data);
},
"text"
);
}
</script>
</head>
<body>
<input type="button" value="ajax异步访问服务器端" onclick="sendRequest()">
</body>
jsp
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
//获得请求参数
String name = request.getParameter("name");
String age = request.getParameter("age");
response.getWriter().write("ajax response data ..."+ name +"..."+age);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
doGet(request, response);
}
}
简单的post请求
参数名称 | 解释 |
---|---|
url | 请求的服务器端url地址 |
data | 发送给服务器端的请求参数 ,格式可以是key=value,也可以是js对象 |
callback | 当请求成功后的回掉函数,可以在函数体中编写我们的逻辑代码 |
type | 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defau |
和get几乎是一样的 就不重写了
*AJAX请求方式
jQuery.ajax([settings])
settings常见的属性如下
属性名称 | 解释 |
---|---|
url | 请求的服务器端url地址 |
async | (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false |
data | 发送到服务器的数据,可以是键值对形式,也可以是js对象形式 |
type | (默认: “GET”) 请求方式 (“POST” 或 “GET”), 默认为 “GET” |
dataType | 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等 |
success | 请求成功后的回调函数 |
error | 请求失败时调用此函数 |
js代码
<script type="text/javascript">
function sendRequest(){
$.ajax({
url : "/AjaxDemo/ajaxServlet",
async:true,
data:"name=tom&age=33",
type:"GET",
dataType:"text",
success:function(data){
alert(data);
},
error:function(){
alert("数据没有成功返回!")
}
});
}
</script>
<body>
<input type="button" value="ajax异步访问服务器端" onclick="sendRequest()">
</body>
Servlet代码
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
//获得请求参数
String name = request.getParameter("name");
String age = request.getParameter("age");
response.getWriter().write("ajax response data ..."+ name +"..."+age);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
doGet(request, response);
}
}
效果
jQuery3.0 为get和post新增了签名方式 让其和.ajax保持一致 参数都是一样的
演示3.0中的post
$.post([settings])
属性名称 | 解释 |
---|---|
url | 请求的服务器端url地址 |
async | (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false |
data | 发送到服务器的数据,可以是键值对形式,也可以是js对象形式 |
type | (默认: “GET”) 请求方式 (“POST” 或 “GET”), 默认为 “GET” |
dataType | 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等 |
success | 请求成功后的回调函数 |
error | 请求失败时调用此函数 |
js代码
<script type="text/javascript">
function sendRequest(){
$.post({
url:"/AjaxDemo/ajaxServlet",
async:true,
data:"name=tom&age=33",
type:"GET",
dataType:"text",
success:function(data){
alert(data);
},
error:function(){
alert("数据没有成功返回!")
}
});
}
</script>
</head>
<body>
<input type="button" value="ajax异步访问服务器端" onclick="sendRequest()">
</body>
Servlet代码
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
//获得请求参数
String name = request.getParameter("name");
String age = request.getParameter("age");
response.getWriter().write("ajax response data ..."+ name +"..."+age);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {
doGet(request, response
);