Struts2整合jQuery實現ajax異步登錄

openkk 12年前發布 | 5K 次閱讀 Property Binder

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>
    <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;
}
}
 本文由用戶 openkk 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！