天天看点

Struts2整合jQuery实现ajax异步登录

jQuery对ajax进行了封装,在jQuery中$.ajax()属于最底层的方法,第二层是load(),$.get(),$.post()方法,

第三层是$.getScrip()和$.getJSON()方法。下面是使用$.ajax()方法实现异步登录。

1.编写index.jsp页面.

<%@ 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>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="scripts/jquery-1.7.2.js"></script>

<script type="text/javascript">

$(function(){

    $('#send').click(function() {

     var params=$('input').serialize();     //将input元素序列化,返回JSON数据格式

     $.ajax({

        type: 'post',                                //请求方式为post方式

         url: 'login.action',                        //请求地址

         dataType: 'json',                         //服务器返回类型为JSON类型

         data:params,                               //发送到服务器的数据

        success:function(data){                 //请求成功后的回调函数

        $('#show').html(data.result); 

    }  

});

 });

})

</script>

  </head>

  <body>

    <center>

     <h2>登录页面</h2>

     <hr/>

     <div id="show"></div>

     <form id="logForm" method="post">

     <table>

     <tr>

     <td><label>用户名:</label></td>

     <td><input type="text" id="username" name="user.username" ></td>

     </tr>

     <td><label>密码:</label></td>

     <td><input type="text" id="password" name="user.password" ></td>

     <td><input type="button" id="send" value="提交"></td>

     <td><input type="reset" value="重置"></td>

     </table>

     </form>

    </center>

  </body>

</html>

2.配置struts.xml.

<?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="struts2" namespace="/" extends="json-default">

<action name="login" class="com.action.LoginAction">

<result type="json"></result>

</action>

</package>

</struts>    

3.User.java

package com.model;

public class User {

private String username;

private String password;

public String getUsername() {

return username;

}

public void setUsername(String username) {

this.username = username;

public String getPassword() {

return password;

public void setPassword(String password) {

this.password = password;

4.LoginAction.java

package com.action;

import com.model.User;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")

public class LoginAction extends ActionSupport {

private User user;

private String result;

public User getUser() {

return user;

public void setUser(User user) {

this.user = user;

public String getResult() {

return result;

public void setResult(String result) {

this.result = result;

public String execute() throws Exception{

result ="异步登录成功!"+"+用户名: "+user.getUsername()+"    密码: "+user.getPassword();

System.out.println(result);

return SUCCESS;

本文转自yunlielai51CTO博客,原文链接:http://blog.51cto.com/4925054/1148263,如需转载请自行联系原作者