ajax案例---以GET和POST方式异步提交数据给后台

最新推荐文章于 2020-10-23 19:18:15 发布

Geek_ymv

最新推荐文章于 2020-10-23 19:18:15 发布

阅读量1.1w

点赞数

分类专栏： Jsp/Servlet

本文链接：https://blog.csdn.net/Geek_ymv/article/details/24595957

版权

Jsp/Servlet 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前台页面代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax demo</title>

	<script type="text/javascript">
		var xmlHttpRequest = null;

		function ajaxSubmit(){
		//	window.alert(window.ActiveXObject);
			
			if(window.ActiveXObject){	//是IE浏览器

				xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

			}else if(window.XMLHttpRequest){	//除IE外的其他浏览器

				xmlHttpRequest = new XMLHttpRequest();
			}

			/*
				使用Ajax准备向服务器端发送一个请求
			*/
			if(null != xmlHttpRequest){	//使用GET方式，			//异步
				var num1 = document.getElementById("num1").value;
				var num2 = document.getElementById("num2").value;
				
				
			//	xmlHttpRequest.open("GET", "AjaxServlet?num1=" + num1 + "&num2=" + num2, "true");

				xmlHttpRequest.onreadystatechange = ajaxCallBack;	//注册一个回调函数

				//向服务器端发送数据
			//	xmlHttpRequest.send(null);	//get方式设置为null

				//post方式
				xmlHttpRequest.open("POST", "AjaxServlet", "true");
				//使用post方式提交数据，必须加上下面这行代码
				xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				
				xmlHttpRequest.send("num1=" + num1 + "&num2=" + num2);

			}
		}

		function ajaxCallBack(){

			if(xmlHttpRequest.readyState == 4){

				if(xmlHttpRequest.status == 200){
					var responseText = xmlHttpRequest.responseText;
				
					document.getElementById("content").innerHTML = responseText;	
				}
			} 
		}

		
	</script>

  </head>
  
  <body>
	<input type="text" name="num1" id="num1"/> <br/>
	<input type="text" name="num2" id="num2"/> <br/>
	
	<input type="button" value="从服务区端获取数据" onclick="ajaxSubmit();"/>

	<div id="content"></div>
  </body>

</html>

后台处理代码

package com.ajax.test;

import java.io.IOException;
import java.io.PrintWriter;

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

public class AjaxServlet extends HttpServlet {
	
	private static final long serialVersionUID = 1L;
	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");

		String num1 = request.getParameter("num1");
		String num2 = request.getParameter("num2");
		
		int num3 = Integer.valueOf(num1) + Integer.valueOf(num2);
		
		PrintWriter out = response.getWriter();
		
		System.out.println("AjaxServlet.doGet()");
		
		out.println(num3);

	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		System.out.println("AjaxServlet.doPost()");
		
		this.doGet(request, response);
	}
}