jQuery框架的ajax

最新推荐文章于 2023-11-20 21:35:13 发布

hgdzw

最新推荐文章于 2023-11-20 21:35:13 发布

阅读量218

点赞数 1

本文链接：https://blog.csdn.net/hgdzw/article/details/88665065

版权

三种常见的请求

请求方式	语法
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
);

在这里插入图片描述

hgdzw

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery框架的ajax

三种常见的请求请求方式语法GET请求$.get(url, [data], [callback], [type])POST请求$.post(url, [data], [callback], [type])AJAX请求$.ajax([settings简单的get请求参数名称解释url请求的服务器端url地址data发送给服务...
复制链接

扫一扫