一:下载所需的软件,搭建环境
1:JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html
2:Eclipse:http://www.eclipse.org/downloads/
3:TomCat: http://tomcat.apache.org/download-80.cgi
4:Struts2:http://struts.apache.org/download.cgi#struts255
5:Jquery:http://jquery.com/download/
二:配置环境
在"系统变量"中设置3项属性,JAVA_HOME,PATH,CLASSPATH(大小写无所谓),若已存在则点击"编辑",不存在则点击"新建"。
变量设置参数如下:
- 变量名:JAVA_HOME
- 变量值:C:\Program Files (x86)\Java\jdk1.8.0_91 // 要根据自己的实际路径配置
- 变量名:CLASSPATH
- 变量值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; //记得前面有个"."
- 变量名:Path
- 变量值:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin
- 安装Tomcat:直接解压缩下载文件“apache-tomcat-7.0.33-windows-x86.zip”到C盘下。安装路径建议修改为:c:\tomcat。
三:创建Web工程
1:在WebContent/WEB-INF/lib下添加Struts所需要的JAR包,创建JS文件夹,创建页面,创建Web.xml
2:在WebContent下新建web.xml文件修改内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_9" version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>Struts Showcase Application</display-name>
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
<web-app id="WebApp_9" version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>Struts Showcase Application</display-name>
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
3:导入jquery文件
4:编写页面code,完成二个数字求和,通过ajax提交给后台,再由返回给ajax,显示到页面sum.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.1.1.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn_sum").click(function(){
var number1 = $("#numberOne").val();
var number2 = $("#numberTwo").val();
$.ajax({
type:'post',
url:'/strcuts_test/action/sum.action',
data:{numberOne:number1,numberTwo:number2},
dataType:'json',
success:function(data){
var model = JSON.parse(data);
$("#result").html(model.sum);
},
error:function(e)
{
alert("encounter an error"+e);
}
});
});
});
</script>
</head>
<body>
<span>First Number:</span>
<input type="text" id="numberOne" name="numberOne" value="">
<br />
<span>Second Number:</span>
<input type="text" name="numberTwo" id="numberTwo" value="">
<br />
<input type="button" id="btn_sum" value="compute" />
<br/>
<span >The Result:</span>
<span id="result"></span>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.1.1.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn_sum").click(function(){
var number1 = $("#numberOne").val();
var number2 = $("#numberTwo").val();
$.ajax({
type:'post',
url:'/strcuts_test/action/sum.action',
data:{numberOne:number1,numberTwo:number2},
dataType:'json',
success:function(data){
var model = JSON.parse(data);
$("#result").html(model.sum);
},
error:function(e)
{
alert("encounter an error"+e);
}
});
});
});
</script>
</head>
<body>
<span>First Number:</span>
<input type="text" id="numberOne" name="numberOne" value="">
<br />
<span>Second Number:</span>
<input type="text" name="numberTwo" id="numberTwo" value="">
<br />
<input type="button" id="btn_sum" value="compute" />
<br/>
<span >The Result:</span>
<span id="result"></span>
</body>
</html>
5:编写后台acion类
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.interceptor.ServletRequestAware;
import com.opensymphony.xwork2.ActionSupport;
import net.sf.json.JSONObject;
public class FirstAction extends ActionSupport implements ServletRequestAware{
private int numberOne;
private int numberTwo;
private String result;
private HttpServletRequest request;
@Override
public String execute() throws Exception {
String one = this.request.getParameter("numberOne");
String two = this.request.getParameter("numberTwo");
TestModel model = new TestModel();//这就是个简单的model,自己创建,不贴代码了
model.setNumberTwo(this.getNumberOne());
model.setNumberOne(this.getNumberTwo());
model.setSum(this.numberOne + this.numberTwo);
JSONObject json=JSONObject.fromObject(model);
this.setResult(json.toString());
return SUCCESS;
}
public int getNumberOne() {
return numberOne;
}
public void setNumberOne(int numberOne) {
this.numberOne = numberOne;
}
public int getNumberTwo() {
return numberTwo;
}
public void setNumberTwo(int numberTwo) {
this.numberTwo = numberTwo;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
@Override
public void setServletRequest(HttpServletRequest arg0) {
// TODO Auto-generated method stub
this.request = arg0;
}
}
6:在src目录下新建struts.xml,并修改内容如下
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"
"http://struts.apache.org/dtds/struts-2.5.dtd">
<!-- START SNIPPET: xworkSample -->
<struts>
"-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"
"http://struts.apache.org/dtds/struts-2.5.dtd">
<!-- START SNIPPET: xworkSample -->
<struts>
<!--namespace的值是action具体类的包名称-->
<package name="struts2" namespace="/action" extends="json-default">
<action name="sum" class="action.FirstAction">
<result type="json">
<!-- 此处将reslut的值返回给客户端,root的值对应要返回的值的属性result 注意:root为固定写法,否则不会把result的值返回给客户端 -->
<param name="root">result</param>
</result>
</action>
</package>
</struts>
<package name="struts2" namespace="/action" extends="json-default">
<action name="sum" class="action.FirstAction">
<result type="json">
<!-- 此处将reslut的值返回给客户端,root的值对应要返回的值的属性result 注意:root为固定写法,否则不会把result的值返回给客户端 -->
<param name="root">result</param>
</result>
</action>
</package>
</struts>
7:添加tomcat服务器,dubug调试web项目
在Eclipse中添加Tomcat Server。步骤如下:
Window->Preferences->Server->Runtime Environments->Add->选择Apache Tomcat v6.0->next->选择Tomcat的安装目录->finish。
当Tomcat被添加到Eclipse的Server以后,Eclipse会自动创建一个名称为“Servers”的项目,其中包含了context.xml、server.xml、tomcat-users.xml、web.xml等基本配置文件。下面开始配置web项目调试选项:
在web项目上右键->Debug As->Debug Configurations->在Apache Tomcat上右键->New,创建调试器,然后使用缺省配置选项即可。接下来就可以在项目上右键->Debug On Server开始调试web项目了。
Window->Preferences->Server->Runtime Environments->Add->选择Apache Tomcat v6.0->next->选择Tomcat的安装目录->finish。
当Tomcat被添加到Eclipse的Server以后,Eclipse会自动创建一个名称为“Servers”的项目,其中包含了context.xml、server.xml、tomcat-users.xml、web.xml等基本配置文件。下面开始配置web项目调试选项:
在web项目上右键->Debug As->Debug Configurations->在Apache Tomcat上右键->New,创建调试器,然后使用缺省配置选项即可。接下来就可以在项目上右键->Debug On Server开始调试web项目了。
最后在附上一个项目结构图