Ajax

最新推荐文章于 2022-06-19 13:50:53 发布

yongfeicao

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量94

点赞数 1

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/QJQJLOVE/article/details/105082098

版权

JavaWeb 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1、Ajax概述

Ajax 的实际意义是不发生页面跳转、异步载入内容并改写页面内容的技术
Ajax也可以简单的理解为通过JS向服务器发送请求

2、Ajax请求

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax请求</title>
<script  src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		//给button绑定单击事件
		$("#btnAjax").click(function(){
			//通过$.ajax发送Ajax请求！
			$.ajax({
				/*
					url:必须的
					type:可选，post,默认是get,设置发送请求的方式
					data:可选，用来设置请求参数
					success:可选的，用来设置回调函数，响应成功之后系统会自动调用该函数
							响应数据会以参数的形式传输到该函数中
					dataType：可选的，用来设置响应数据的类型，默认是text，可以设置成xml，或者是json等
				*/
				 
				
				url:"${pageContext.request.contextPath}/AjaxServlet",
				type:"get",
				data:"username=admin&password=111111",
				success:function(res){
					//将响应的信息设置到span标签里面
					$("#res1").text(res);
				},
				dataType:"text"
			});
		});
		
		
		//给butID
		//返回值$.get(url,[data],[callback],[type])
		//url:必须的
		//data：可选的
		//callback：可选的，用来设置回调函数，响应成功之后系统会自动调用该函数
		//				响应数据会以参数的形式传输到该函数中
		//type:可选，post,默认是get,设置发送请求的方式
		$("#btnGet").click(function(){
			var url = "${pageContext.request.contextPath}/AjaxServlet";
			var params = "username=admin&password=111111111";
			
			$.get(url,params,function(res){
				//将响应数据设置到span标签中
				$("#res2").text(res);
			},"text");
			
			//通过post方法发送请求
			$.post(url);
		});
		
		
		
	});
</script>
</head>
<body>
	<button id="btnAjax">通过$.ajax发送Ajax请求！</button><span style="color:red" id="res1"></span><br>
	<button id="btnGet">通过$.get/post发送Ajax请求！</button><span style="color:red" id="res2"></span><br>
</body>
</html>

AjaxServlet.java

package servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 用来处理Ajax请求的Servlet
 */
public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		System.out.println("doget()");
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		System.out.println(username);
		System.out.println(password);
		response.setContentType("text/html;charset=utf-8");
		//给浏览器响应一个字符串
		response.getWriter().write("响应成功");
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		System.out.println("dopost()");
		
		
	}

}