您的位置：首页 > Web前端 > JQuery

Struts2整合jQuery实现ajax异步登录

2013-03-06 13:18 495 查看

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">  <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> <tr> <td><label>密码：</label></td> <td><input type="text" id="password" name="user.password" ></td> </tr> <tr> <td><input type="button" id="send" value="提交"></td> <td><input type="reset" value="重置"></td> </tr> </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; }}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax 是

相关文章推荐

新的分享

章节导航