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,
HttpServletResponse response) throws ServletException, 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>
仅供参考