Ajax实现无刷新登陆

最新推荐文章于 2021-08-06 02:57:46 发布

丶人生如梦

最新推荐文章于 2021-08-06 02:57:46 发布

阅读量582

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ll840768874/article/details/45075971

一个页面很多内容，而在登陆成功后不想整个页面都刷新一次，整个效率低，每次都要加载页面，所以需要实现无刷新登陆

只是简单地做了个一个demo，望各位大侠轻喷

jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<%
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>My JSP 'index.jsp' starting page</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">
	-->
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#testBut").click(function()
			{
				$.ajax(
				{
					url:"login!loginTest.action",     //动态方法的调用
					type:"POST",
					dataType: "json",
					data:$("#form2").serialize(),    //通过serialize()获得表单数据的值
					success:function(date)
					{
						if(date["ok"])
						{
							$("#formtest").html("欢迎"+date["username"]+"登陆");
						}
						else
						{
							$("#info").html("登陆失败！");
						}
					},
					error:function()
					{
						$("#info").html("登陆失败!!!!!");
					},
					async:false,  //<span style="color: rgb(54, 46, 43); font-family: Arial; font-size: 14px; line-height: 26px;">false为同步,ajax将浏览器锁死</span>
				});
			});
		});
	</script>
  </head>
  
  <body>
  	
  <div id="formtest" style="display: block;">
  	<div id="info"></div>
  	<form action="login!loginTest.action" method="post" id="form2">
  		用户名：<input type="text" name="user.username"><br/>
  		密码：<input type="password" name="user.password"><br/>
  		<input type="button" value="登陆" id="testBut">
  	</form>
  </div>
  	
  </body>
</html>

stuts.xml文件中要支持返回的是json的数据package要继承json-default

内容如下所示：

<?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>
<!-- 动态方法调用 -->
	<constant name="struts.enable.DynamicMethodInvocation" value="true"></constant>
	<pre name="code" class="html"><span style="white-space:pre">	</span><!-- 继承<span style="font-family: Arial, Helvetica, sans-serif;">json-default</span><span style="font-family: Arial, Helvetica, sans-serif;"> --></span>

<span style="white-space:pre">	</span><package name="my" extends="json-default" namespace="/">	
		<action name="login" class="com.itany.action.UserAction">
			<result type="json">

<span style="color: rgb(0, 130, 0); font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace; line-height: 18px; background-color: rgb(250, 250, 250);"><span style="white-space:pre">			</span>     <!-- 这里指定将被Struts2序列化的属性，该属性在action中必须有对应的getter方法 --></span>

<span style="white-space:pre">				</span><!-- root表示返回的根，action里有map这个属性，此时返回也没有页面 -->
				<param name="root">map</param>
			</result>
		</action>
	</package>
</struts>

action类：

public class UserAction extends ActionSupport 
{
	private String msg;
	
	private Map<Object, Object> map =new HashMap<Object, Object>();
	
	public Map<Object, Object> getMap()
    {
        return map;
    }


    public void setMap(Map<Object, Object> map)
    {
        this.map = map;
    }

	public User user;
	
	public User getUser()
    {
        return user;
    }


    public void setUser(User user)
    {
        this.user = user;
    }


	 /**
<span style="white-space:pre">	</span> * 动态方法调用
<span style="white-space:pre">	</span> * 由于只是个demo，就没分dao service层了，全在action做了
<span style="white-space:pre">	</span> * <功能详细描述>
<span style="white-space:pre">	</span> * @return
<span style="white-space:pre">	</span> * @throws Exception
<span style="white-space:pre">	</span> * @see [类、类#方法、类#成员]
<span style="white-space:pre">	</span> */
	public String loginTest()
	{
	    map.clear(); //map中的数据将会被Struts2转换成JSON字符串，所以这里要先清空其中的数据  
	    System.out.println(user.getUsername());
        System.out.println(user.getPassword());
        
	    HttpServletRequest request=ServletActionContext.getRequest();
        HttpServletResponse response=ServletActionContext.getResponse();
	    
	    JDBCUtil util = new JDBCUtil();
	    Connection conn=null;
	    PreparedStatement pstmt=null;
	    ResultSet rs=null;
	    String sql="select * from user where username=? and password=?";
	    List<User> users=new ArrayList<User>();
	    try
        {
            conn=util.getCon();
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, user.getUsername());
            pstmt.setString(2, user.getPassword());
            rs = pstmt.executeQuery();
            while (rs.next())
            {
                User user=new User();
                user.setUsername(rs.getString("username"));
                user.setPassword(rs.getString("password"));
                users.add(user);
            }
        }
        catch (SQLException e)
        {
            e.printStackTrace();
        }


	    map.put("ok", true);  <span class="comment" style="color: rgb(0, 130, 0); padding: 0px; margin: 0px; width: auto; border: 0px; font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace; line-height: 18px; background-color: rgb(250, 250, 250);">// 放入一个是否操作成功的标识</span><span style="font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace; line-height: 18px; background-color: rgb(250, 250, 250);">  </span>
	    map.put("username", user.getUsername());
	   
	    return SUCCESS;
	}
}