Ajax技术

最新推荐文章于 2023-05-22 23:12:02 发布

江湖侠客

最新推荐文章于 2023-05-22 23:12:02 发布

阅读量108

点赞数

分类专栏： Java框架技术

本文链接：https://blog.csdn.net/weixin_39868387/article/details/103027362

版权

Java框架技术专栏收录该内容

44 篇文章 4 订阅

订阅专栏

工程创建步骤

在这里插入图片描述

工程创建目录如下：

通过$.ajax（）方法发送Ajax请求
首先，在WebContent文件创建index.jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//给按钮绑定单击事件
		$("#btnId").click(function(){
			alert("Hello Ajax");
		});
	});
</script>
</head>
<body>
	<button id="btnId">通过$.ajax()方法发送Ajax请求</button>

</body>
</html>

在这里插入图片描述
在WebContent目录下，创建script文件，并在script文件引入jquery-1.7.2.js文件

启动服务运行，效果图：

通过$.ajax()方法发送Ajax请求
步骤：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//给按钮绑定单击事件
		$("#btnId").click(function(){
			//通过$.ajax()方法发送Ajax请求
			
			$.ajax({
				url:"${pageContext.request.contextPath }/AjaxServlet",
				
			});
		});
	});
</script>
</head>
<body>
	<button id="btnId">通过$.ajax()方法发送Ajax请求</button>

</body>
</html>

在这里插入图片描述
接着，创建Servlet
步骤：

创建出来的工程目录如下：

启动服务器，效果图，如下：

首先，type：可选的。用来设置发送请求的请求方式，默认是get
想要post请求，只需要在type：post即可，如图所示：
在这里插入图片描述
启动服务器，效果图：

获取请求参数

 //获取请求参数
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println(username);
System.out.println(password);

在这里插入图片描述
在index.jsp页面添加参数：

data:"username=admin&password=123456",

在这里插入图片描述
重启服务，效果图：

设置响应请求

步骤：
1、首先，在index.jsp页面添加一个参数

success:function(res){
 alert(res);
}

在这里插入图片描述
2、在AjaxServlet.类添加：

 response.setContentType("text/html;charset=UTF-8");
 //获取打印流
 response.getWriter().write("响应成功！");

在这里插入图片描述
重启服务，效果图：

设置响应数据的类型

dataType：可选的。用来设置响应数据的类型，默认是text，
还可以设置xml、json等
在这里插入图片描述

},
dataType:"text"

在这里插入图片描述

将响应数据设置到span标签中，

在这里插入图片描述
重启服务，效果图：

通过 $. g e t () 或$ .post（）方法发送Ajax请求

步骤：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//给按钮绑定单击事件
		$("#btnId").click(function(){
			//通过$.ajax()方法发送Ajax请求
			
			$.ajax({
				url:"${pageContext.request.contextPath }/AjaxServlet",
				type:"get",
				data:"username=admin&password=123456",
				success:function(res){
					//将响应信息设置到span标签中
					$("#res").text(res);
					
					
                   alert(res);
				},
				dataType:"text"
			});
			
	  });
		
	//给第二个按钮绑定单击事件
	$("#btnId2").click(function(){
		//通过$.get/post()方法发送Ajax请求

		/**	$.get(url, [data], [callback], [type])
				url：必须的。用来设置请求地址
				data：可选的。用来设置请求参数
				callback：可选的。用来设置一个回调函数，响应成功之后系统会自动调用该函数，
						响应数据会以参数的形式传入到该函数中
				type：可选的。用来设置响应数据的类型		
		*/
		
		
		//设置请求地址
		var url = "${pageContext.request.contextPath }/AjaxServlet";
		$.get(url);
	 });
	});
</script>
</head>
<body>
	<button id="btnId">通过$.ajax()方法发送Ajax请求</button>   <span style="color: red" id="res"></span>
    <button id="btnId2">通过$.get/post()方法发送Ajax请求</button><span style="color: red" id="res2"></span>
    
</body>
</html>

在这里插入图片描述
启服务，效果图：

若相出现有数据，需要设置请求get请求数据


//设置请求地址
var url = "${pageContext.request.contextPath }/AjaxServlet";

//设置请求参数
var params = "username=admin&password=666666";
		
$.get(url,params,function(res){
$("#res2").text(res);
    },"text");
 });