• Struts2结合Ajax实现登录


    前言:Struts2作为一款优秀的MVC框架,和Ajax结合在一起,用户就会有良好的体验,本篇博文我们来模拟一个简单的登录操作,实现Ajax的异步请求,其中Struts2进行的是链接处理,Action动态处理请求,Ajax负责进行异步处理,传送数据与返回数据,其中主要使用的技术有:struts2+Ajax+Jquery+Css,好吧,废话不多说,让我们来看看这个实例吧。

    第一步:新建一个Dynamic web project,然后起名:Struts2Ajax,引入相关的jar包,在web.xml文件中配置struts2的filter.我们都知道新的请求首先进入的.xml文件,所以配置上过滤器,这样请求就会自动进入交给struts2处理了。

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app id="WebApp_ID" 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>Struts2Ajax</display-name>
    	<filter>
    		<filter-name>struts2</filter-name>
    		<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    	</filter>
    	<filter-mapping>
    		<filter-name>struts2</filter-name>
    		<url-pattern>/*</url-pattern>
    	</filter-mapping>
    </web-app>
    

      

    第二步:我们来配置Struts2的配置文件,其中主要是配置Action,也就是请求过来交给谁进行处理,注意这里的result Type="stream"是io中流的方式,它输出的是二进制数据,我们的contentType是html文件,它最终会返回页面以html的形式出现在页面下角

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
    <struts>
    	<package name="StrutsAjax" extends="struts-default">
    		<action name="login"  class="com.wyq.Action.LogAction">
    			<result type="stream" name="success">
    			<param name="cotentType">text/html</param>
    			<param name="inputName">result</param>
    			</result>
    		</action>
    	</package>
    </struts>    
    

      第三步:我们新建一个包,起名com.wyq.Action,主要是来存放请求的Action。新建类,LoginACtion,代码如下:

    package com.wyq.Action;
    
    import java.io.ByteArrayInputStream;
    import java.io.InputStream;
    
    import com.opensymphony.xwork2.Action;
    
    public class LogAction implements Action{
    
    	private String user;
    
    	private String pass;
    
    	private InputStream inputStream;
    
    	public String getUser() {
    		return user;
    	}
    
    	public void setUser(String user) {
    		this.user = user;
    	}
    
    	public String getPass() {
    		return pass;
    	}
    
    	public void setPass(String pass) {
    		this.pass = pass;
    	}
    
    	public void setInputStream(InputStream inputStream) {
    		this.inputStream = inputStream;
    	}
    
    	public InputStream getResult() {
    		return inputStream;
    	}
    
    	@Override
    	public String execute() throws Exception {
    
    		String sus="恭喜你,登录成功!";
    		
    		String fail="对不起,用户名和密码不匹配";
    
    		inputStream=user.equals("wangyongqiang")&&pass.equals("123")?new ByteArrayInputStream(sus.getBytes("UTF-8")):new ByteArrayInputStream(fail.getBytes("UTF-8"));
    		
    		return SUCCESS;
    	}
    
    }
    

      第四步:我们来编写请求的页面,loginForm.jsp,其中要引入Jquery框架,使用到css,这里为了方便起见,我采用的方式是引入一个互联网中的jquery资源,然后借助于Jquery的Ajax,实现异步请求

    <%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>
    <%@ taglib prefix="s" uri="/struts-tags" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>使用stream结果实现Ajax</title>
    	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" 
    	  type="text/javascript">
    	</script>
    </head>
    <body>
    <s:form id="loginForm">
    	<s:textfield name="user" label="用户名"/>
    	<s:textfield name="pass" label="密码"/>
    	<tr><td colspan="2">
    	<input id="loginBn" type="button" value="提交"/>
    	</td></tr>
    </s:form>
    
    <div id="show" style="display:none;">
    </div>
    <script type="text/javascript">
    	// 为id为loginBn的按钮绑定事件处理函数
    	$("#loginBn").click(function()
    	{
    		$("#show").hide();
    		// 指定向login发送请求,以id为loginForm表单里各表单控件作为请求参数
    		$.get("login" , $("#loginForm").serializeArray() , 
    			// 指定回调函数
    			function(data , statusText)
    			{
    				$("#show").height(30)
    					.width(400)
    					.css("border" , "1px solid black")
    					.css("border-radius" , "10px")
    					.css("background-color" , "#efef99")
    					.css("color" , "#ff0000")
    					.css("padding" , "20px")
    					.empty();
    				$("#show").append("登录结果:" + data + "<br />");
    				$("#show").show(2000);
    			},
    			// 指定服务器响应为html
    			"html");
    	});
    </script>
    </body>
    </html>
    

      第五步:编译,然后放在weblogic中部署,接下来就可以运行了。在浏览器窗口,输入:http://localhost:7001/Struts2Ajax/loginForm.jsp,我们就可以看到一个登陆框。

    然后,按照我们的写法,先来输入一个错误的用户名和密码,我们看看会发生什么情况。

    再按照Action中设置的账号和密码,我们来看看会返回什么结果;

    总结:这就是一个完整的Struts2和Ajax结合的实例,虽然很简单,但是也可以学到很多知识,比如Struts2支持的返回类型为Stream,这是一种流的方式,就可以进行数据输出,从而结合与jquery,就可以实现异步请求,以下是基本原理图:

     

  • 相关阅读:
    Place the Robots 需要较强的建图能力
    Channel Allocation 贪心涂色
    A Simple Math Problem 矩阵打水题
    按钮的高亮状态的颜色
    设置UITableViewCell选中颜色但是无效
    常用的忽略警告
    UIButton按钮的高亮状态颜色
    字节的不同单位间的转换
    通过颜色绘制图片UIImage
    头像裁剪功能的实现
  • 原文地址:https://www.cnblogs.com/wyq178/p/6791702.html
Copyright © 2020-2023  润新知