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>