ajax与servlet交互实例，初学者看

最新推荐文章于 2024-09-22 09:16:40 发布

暴躁小学生

最新推荐文章于 2024-09-22 09:16:40 发布

阅读量1.6w

点赞数 9

分类专栏： ajax 文章标签： tomcat ajax servlet jquery

本文链接：https://blog.csdn.net/m0_38024780/article/details/77164146

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍如何利用Ajax技术和jQuery库实现简单的前后端数据交互。通过一个示例项目，详细展示了前端页面如何发送请求给后端Servlet，并接收处理后的响应数据。此教程适合初学者了解基本的Ajax应用。

摘要由CSDN通过智能技术生成

首先需要导入jQuery.js 百度jQuery进官网下载就行注意要放在 WEB-INF下面

前端代码：

<%@ 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>Insert title here</title>
<script src="/ajax/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function ajaxFun(){
$.ajax({
type: "POST", //传数据的方式
url: "TestServlet", //servlet地址

data: $('#form').serialize(), //传的数据 form表单里面的数据
success: function(result){ //传数据成功之后的操作 result是servlet传过来的数据这个函数对result进行处理，让它显示在输入框中
$("#result").val(result); //找到输入框并且将result的值传进去
}
});
}

</script>
</head>
<body>
<H1 align="center">请输入两个字符串</H1>
<div align="center">
<form id="form">
first:<input type="text" name="first" id="first">
second:<input type="text" name="second" id="second">
<button type="button" οnclick="ajaxFun()">button</button> //提交按钮
</form>
<input type="text" id="result"> // 用来显示 result
</div>
</body>
</html>

servlet代码：

package ajax;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import java.io.*;

public class TestServlet extends HttpServlet{
public void doPost(HttpServletRequest request,HttpServletResponse response)throws IOException,ServletException{
response.setContentType("text/html");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();

String first = request.getParameter("first"); //从前端获取数据first
String second = request.getParameter("second");//从前端获取数据second
String result=first+second;
System.out.println(result); //用于测试，判断是否成功获取到数据；
out.println(result); //将数据传到前端

}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doPost(request, response);
}

}