(Struts2学习篇) Struts2之Jquery整合

冷不防 2023-10-16 20:18 16阅读 0赞

**主要思路：**

1、客户端是通过$.ajax()方法向struts2.action传递数据；

2、其中action中execute()方法返回值为空，并通过【ServletActionContext.getResponse().getWriter().print(result);】方法将数据传到jQuery中。

相关源代码：

struts.xml配置文件

登入Action（LoginActions）

package com.vixuan.skydrive.action;
    
    import org.apache.struts2.ServletActionContext;
    
    import com.opensymphony.xwork2.ActionSupport;
    
    public class LoginActions extends ActionSupport {
    
    	/**
    	 * 
    	 */
    	private static final long serialVersionUID = 1L;
    	private String mname;
    
    	private String mpass;
    
    	/* 省略getter和setter方法 */
    
    	public String execute() throws Exception {
    
    		boolean result = false;
    
    		if ("root".equals(mname) && "123456".equals(mpass))
    
    		{
    			result = true;
    		}
    
    		// 向客户端传递数据
    		ServletActionContext.getResponse().getWriter().print(result);
    		return null;
    	}
    
    	public String getMname() {
    		return mname;
    	}
    
    	public void setMname(String mname) {
    		this.mname = mname;
    	}
    
    	public String getMpass() {
    		return mpass;
    	}
    
    	public void setMpass(String mpass) {
    		this.mpass = mpass;
    	}
    
    }

用户登入Html(Login.html)

<html>
    
    <head>
    
    <title>jQuery与Struts2的整合</title>
    
    <meta http-equiv="content-type" content="text/html; charset=GBK">
    
    
    
    <style type="text/css">
    body {
    	font-size: 13px
    }
    
    .divFrame {
    	width: 250px;
    	border: solid 1px #666
    }
    
    .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/jquery-1.9.1.js"></script>
    
    <script type="text/javascript">
    
           $(function()
    
           {
    
               $("#Button1").click(function(){ 
    
                  var mName=encodeURI($("#mname").val());
    
                  var mPass=encodeURI($("#mpass").val());
    
                  $.ajax(
    
                  {
    
                      url:"loginUser.action",
    
                      dataType:"html",
    
                      data:{mname:mName,
    
                           mpass:mPass},
    
                      success:function(strValue)
    
                      {
    
                         alert(strValue);
    
                         
    
                         if(strValue=="true"){
    
                             $("#divTip").html("操作提示，登录成功！");
    
                         }else
    
                         {
    
                             $("#divTip").html("用户名或密码错误！");
    
                         }
    
                      }
    
                  })
    
               })
    
           })
    
        
    
        </script>
    
    </head>
    
    
    
    <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>
    
    </html>