Struts2中的Action配合jQuery和Ajax操作
阿新 • • 發佈：2019-02-02
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>struts+jquery+ajax</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
body{font-size:15px}
.divFrame{width:250px;border:solid 1px #666;margin:100px;}
.divFrame .divTitle{padding:5px;background-color:#eee}
.divFrame .divContent{padding:8px}
.divFrame .divContent .clsShow{font-size:14px}
.btn{border:#666 1px solid;padding:2px;width:50px;
filter:progid:DXImageTransform.Microsoft
.Gradient(GradientType=0,StartColorStr=#ffffff,
EndColorStr=#ECE9D8);}
form{padding:0px;margin:0px}
}
</style>
<script type="text/javascript" src="js/jquery1.9.1.js"></script>
<script type="text/javascript">
$(function(){
$("#Button1").click(function(){
var mName=encodeURI($("#mname").val());
var mPass=encodeURI($("#mpass").val());
// alert(mName);
$.ajax(
{
url:"<%=basePath%>/test/login",//<%=basePath%>/test/login
dataType:"html",
data:{mname:mName,//傳送給伺服器的資料
mpass:mPass},
success:function(strValue)
{
alert(strValue);
if(strValue=="true"){
$("#divTip").html("操作提示，登入成功！");
}else
{
$("#divTip").html("使用者名稱或密碼錯誤！");
}
}
});
});
});
</script>
</head>
<body>
<!-- 1.客戶端通過$.ajax()方法向struts2.action傳遞資料 -->
<!-- 2.action中execute()方法返回值為空,通過ServletActionContext.getResponse.getWriter().print(result)方法將資料傳到jQuery中 -->
<body>
<div class="divFrame">
<div class="divTitle">使用者登入</div>
<div class="divContent">
<div id="divTip"></div>
<div id="box">
<form id="myForm">
名稱：<input type="text" id="mname" name="mname"/><br/>
密碼：<input type="password" id="mpass" name="mpass"/><br/>
<input id="Button1" type="button" class="btn" value="登入"/>
<input id="Button2" type="reset" class="btn" value="取消"/>
</form>
</div>
</div>
</div>
<br/>
本網頁顯示的是通過$.ajax()方法向struts2.action傳遞資料，<br/>其中action中execute()方法返回為空，<br/>並通過【ServletActionContext.getResponse().getWriter().print(result);】 方法將資料傳到jQuery中。
</body>
</body>
</html>
struts.xml配置資訊:
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>struts+jquery+ajax</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
body{font-size:15px}
.divFrame{width:250px;border:solid 1px #666;margin:100px;}
.divFrame .divTitle{padding:5px;background-color:#eee}
.divFrame .divContent{padding:8px}
.divFrame .divContent .clsShow{font-size:14px}
.btn{border:#666 1px solid;padding:2px;width:50px;
filter:progid:DXImageTransform.Microsoft
.Gradient(GradientType=0,StartColorStr=#ffffff,
EndColorStr=#ECE9D8);}
form{padding:0px;margin:0px}
}
</style>
<script type="text/javascript" src="js/jquery1.9.1.js"></script>
<script type="text/javascript">
$(function(){
$("#Button1").click(function(){
var mName=encodeURI($("#mname").val());
var mPass=encodeURI($("#mpass").val());
// alert(mName);
$.ajax(
{
url:"<%=basePath%>/test/login",//<%=basePath%>/test/login
dataType:"html",
data:{mname:mName,//傳送給伺服器的資料
mpass:mPass},
success:function(strValue)
{
alert(strValue);
if(strValue=="true"){
$("#divTip").html("操作提示，登入成功！");
}else
{
$("#divTip").html("使用者名稱或密碼錯誤！");
}
}
});
});
});
</script>
</head>
<body>
<!-- 1.客戶端通過$.ajax()方法向struts2.action傳遞資料 -->
<!-- 2.action中execute()方法返回值為空,通過ServletActionContext.getResponse.getWriter().print(result)方法將資料傳到jQuery中 -->
<body>
<div class="divFrame">
<div class="divTitle">使用者登入</div>
<div class="divContent">
<div id="divTip"></div>
<div id="box">
<form id="myForm">
名稱：<input type="text" id="mname" name="mname"/><br/>
密碼：<input type="password" id="mpass" name="mpass"/><br/>
<input id="Button1" type="button" class="btn" value="登入"/>
<input id="Button2" type="reset" class="btn" value="取消"/>
</form>
</div>
</div>
</div>
<br/>
本網頁顯示的是通過$.ajax()方法向struts2.action傳遞資料，<br/>其中action中execute()方法返回為空，<br/>並通過【ServletActionContext.getResponse().getWriter().print(result);】 方法將資料傳到jQuery中。
</body>
</body>
</html>
struts.xml配置資訊: