初学 Java Web（六） POST方式Ajax

最新推荐文章于 2021-03-19 09:36:37 发布

原创最新推荐文章于 2021-03-19 09:36:37 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #post #java web #异步

Java web 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用JavaScript通过POST方式发送Ajax请求的例子。当用户在文本框中输入姓名时，会触发Ajax请求，从服务器获取该用户的学校信息并自动填充到相应字段。示例包括了前端HTML和JavaScript代码以及后端Java Servlet的实现。

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

使用javaScript 实现 post方式的ajax 并且要求传递参数到后台

代码实现功能：

一个用户在输入姓名时，出发Ajax异步请求，从服务器获取所在学校信息，并对页面中相应的学校文本域进行自动填充。

代码如下：

AjaxDemo.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>Insert title here</title>
</head>
<script type="text/javascript">
function ajaxProcess(obj)
{
	var xmlhttp;
	var name = obj.value;
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	
	xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
	    {
		  
		  document.getElementById("school").value=xmlhttp.responseText;
	    }
	}
	xmlhttp.open("post","/qst_2/AjaxDemoServlet",true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
	xmlhttp.send("name="+name);
}
</script>
<body>
<h2>获取学生对应的学校</h2>
姓名：<input type="text" name="name" id="name" onblur="ajaxProcess(this)">
学校：<input type="text" name="school" id="school" >
</body>
</html>

AjaxDemoServlet.java

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

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

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

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		
		Map<String, String> datas = new HashMap<String, String>();
		datas.put("小明","山东大学");
		datas.put("小红","北京大学");
		datas.put("小丽","清华大学");
		System.out.println(request.getParameter("name"));
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		String name = request.getParameter("name");
		String data = datas.get(name);
		if (data == null) {
			data = "Error";
		}
		response.getWriter().print(data);
	}
	}

本文为了方便，使用赋值方式代替连接数据库。如果连接数据库，可自行修改。