结合HTML和JavaScript的简单的前端页面，用于获取用户输入的信息并通过Ajax请求发送到服务器端进行处理。

本文链接：https://blog.csdn.net/m0_75014032/article/details/136951368

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script  src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">  </script> 
<title>Insert title here</title>
</head>
<body>
		name:<input type="text" id="name"/>
		sex:<input type="text" id="sex"/>
		age<input type="text" id="age"/>
		<input type="button" value="添加"  onclick="insert()" />
</body>
<script>
function insert(){
	var name = $("#name").val();
	var sex = $("#sex").val();
	var age = $("#age").val();
	
	$.ajax({
		url:"/BigData02/MyFirstServlet",
		type:"get",
		data:{"name":name,"sex":sex,"age":age},
		success:function (value){
			console.log(value);
		}
	})
}
</script>
</html>

package com.bigdata;

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 MyFirstServlet
 */
@WebServlet("/MyFirstServlet")
public class MyFirstServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public MyFirstServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name = request.getParameter("name");
		String sex = request.getParameter("sex");
		String age = request.getParameter("age");
		System.out.println(name + " " + sex + " " + age);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

这段代码是一个简单的HTML页面，包含了一些基本的HTML标记和JavaScript代码。具体来说，这段代码主要包含了以下部分：
HTML部分：
定义了一个文档类型声明 <!DOCTYPE html>，指明文档类型为HTML5。
包含了一个<html>标签，表示HTML文档的根元素。
在<head>标签中设置了文档的字符编码为UTF-8，并引入了一个外部的jQuery库。
设置了文档的标题为 "Insert title here"。
在<body>标签中包含了一些表单元素，如输入框和按钮。
JavaScript部分：
使用了一个<script>标签，包含了JavaScript代码。
定义了一个名为 insert() 的JavaScript函数，该函数用于获取输入框中的值，并通过Ajax请求将这些值发送到指定的URL。
在Ajax请求中，指定了请求的URL为 "/BigData02/MyFirstServlet"，请求类型为 "get"，并发送了包含姓名、性别和年龄的数据。
在请求成功后，会调用一个匿名函数，用于处理返回的数据并输出到控制台。
综合来看，这段代码主要是一个结合了HTML和JavaScript的简单的前端页面，用于获取用户输入的信息并通过Ajax请求发送到服务器端进行处理。