ajax与JQuery结合拓展记录

最新推荐文章于 2021-08-05 22:20:12 发布

dzz_bc

最新推荐文章于 2021-08-05 22:20:12 发布

阅读量354

点赞数

CC 4.0 BY-SA版权

分类专栏： javaee

本文链接：https://blog.youkuaiyun.com/dzz_bc/article/details/80489074

javaee 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用jQuery结合Ajax实现页面局部刷新，通过不同方法发送GET和POST请求，并展示具体的实现代码及Servlet处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery与ajax结合

<%@ 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></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	
	//正常ajax+jquery方式貌似无法指定post或者get
		//ajax加jQuery
		  $(function(){
		   $("#btn").click(function(){
		        $.ajax({
		            url:"/Ajax/Bservlet",
		            data:{"username":"呵呵"},
		            success:function(result){
		              $("#h").html(result);
		            }
		        });
		   });
		});
	//get方式
		$(function(){
		$("#btn").click(function() {
			$.get(
				"/Ajax/Bservlet",
				{"username":"小花"},
				function(result){
					$("#h").html(result);
				}
			);
		  });
		});
	        //最简单的调用ajax的方法
		$(function(){
			$("#btn").click(function() {
				$("#h").load("/Ajax/Bservlet"+"?username=小草");///Ajax/Bservlet是url
			});
		});
	
</script>
</head>
<body>
	<h1 id="h"></h1>
	<br>
	<input id="btn" type="button" value="开始ajax"/>
</body>
</html>

post请求方式：

<%@ 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>??</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	
	
	//ajax+jquery指定post
	$(function(){
		$("#btn").click(function() {
			$.post(
			        "/Ajax/Bservlet",
				{"username":"小花"},
				function(result){
					$("#h").html(result);
				}
			);
		});
	});
</script>
</head>
<body>
	<h1 id="h"></h1>
	<br>
	<input id="btn" type="button" value="开始ajax"/>
</body>
</html>

用的servlet

package cn.dzz.web.servlet1;

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

/**
 * Servlet implementation class Bservlet
 */
@WebServlet("/Bservlet")
public class Bservlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");//从servlet中响应回ajax的数据编码问题
		
		request.setCharacterEncoding("UTF-8");//请求体参数数据中解决中文乱码，编码问题
		String username = request.getParameter("username");
		
		System.out.println(username);
		
		response.getWriter().print("ajak+JQuery");
		
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");//从servlet中响应回ajax的数据编码问题
		
		request.setCharacterEncoding("UTF-8");//请求体参数数据中解决中文乱码，编码问题
		//获取请求参数
		String username = request.getParameter("username");
		System.out.println(username);
		
		response.getWriter().print(username);
	}

}

完毕。