通过ajax调用HttpServlet来实现前后端数据交互

1 前端：ajax实现调用，记得要引用jquery

<!DOCTYPE html>
<html>
<head>


<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<Meta name="description" content="this is my page">
<Meta name="content-type" content="text/html; charset=UTF-8">
<Meta charset="UTF-8">

<title>测试用例</title>

<script type="text/javascript">
function ajaxtest(index) {

	var datapar = {
		"text" : $("#input" + index).val(),"index" : index
	};

	var options = {
		url : "ajaxtest",type : "post",data : datapar,success : function(data) {
			//alert(data);
			var mytext = $("textarea[id*='output" + index + "']");
			mytext.val(data);
		}
	};
	$.ajax(options);
}
</script>

</head>

<body>
	<h2 id="time">测试例子</h2>

	<table border="0" align="center">

		<!-- **************************测试*********************************** -->
		<tr align="center">

			<td width="20%">
				<div>
					<textarea id="input2" placeholder="前端输入">haha</textarea>
				</div>
			</td>
			<td width="10%">
				<div>
					<button onClick=ajaxtest(2)>测试后台</button>
				</div>
			</td>
			<td width="55%">
				<div>
					<textarea id="output2" placeholder="后台输出"></textarea>
				</div>
			</td>
		</tr>
</body>
</html>

2 后台：继承HttpServlet实现后台调用

package com.niu;

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 ServletTest
 */
@WebServlet("/ServletTest")
public class ServletTest extends HttpServlet {

	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public ServletTest() {
		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
		response.setHeader("Content-type","text/html;charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		/**
		 * 当多线程并发访问这个方法里面的代码时，会存在线程安全问题吗
		 * i变量被多个线程并发访问，但是没有线程安全问题，因为i是doGet方法里面的局部变量，
		 * 当有多个线程并发访问doGet方法时，每一个线程里面都有自己的i变量， 各个线程操作的都是自己的i变量，所以不存在线程安全问题
		 * 多线程并发访问某一个方法的时候，如果在方法内部定义了一些资源(变量，集合等) 那么每一个线程都有这些东西，所以就不存在线程安全问题了
		 */
		String text = (String) request.getParameter("text");

		System.out.println("结果已经传入后台：" + text);

		String output = "后台返回的结果加上前台的结果" + text;

		response.getWriter().write(output);
	}

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

}

3 前后端连接：在web-inf下面新建web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	id="WebApp_ID" version="3.0">
	<display-name>WebTest</display-name>
	
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
	</welcome-file-list>
	
	<servlet>
		<servlet-name>default</servlet-name>
		<servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
		<init-param>
			<param-name>debug</param-name>
			<param-value>0</param-value>
		</init-param>
		<init-param>
			<param-name>listings</param-name>
			<param-value>false</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	
	<servlet>
		<servlet-name>ServletDemo1</servlet-name>
		<servlet-class>com.niu.ServletTest</servlet-class>
	</servlet>
	
	<servlet-mapping>
		<servlet-name>ServletDemo1</servlet-name>
		<url-pattern>/ajaxtest</url-pattern>
	</servlet-mapping>

</web-app>

参考源码仅供参考

通过ajax调用HttpServlet来实现前后端数据交互

相关文章