利用jquery框架中ajax实现前台与struts2中action交互

本实例通过利用Jquery框架中的post方法实现了前台jsp页面的数据和以struts2为后台的action之间数据的传递

首先编写jsp页面

JSP代码

[html]  view plain  copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <%@ taglib prefix="s" uri="/struts-tags"%>  
  3. <%  
  4.     String path = request.getContextPath();  
  5.     String basePath = request.getScheme() + "://"  
  6.             + request.getServerName() + ":" + request.getServerPort()  
  7.             + path + "/";  
  8. %>  
  9. >  
  10. <html>  
  11.     <head>  
  12.         <script type="text/javascript" src="<%=path %>/js/jquery-1.7.2.js">  
  13. script>  
  14.         <script type="text/javascript" src="<%=path %>/js/md5.js">  
  15. script>  
  16.         <script type="text/javascript" src="<%=path %>/js/login.js">  
  17. script>  
  18.     head>  
  19.   
  20.     <body>  
  21.         <div align="center">  
  22.             user login  
  23.             <br />  
  24.             <br />  
  25.             username:  
  26.             <s:textfield name="username">s:textfield>  
  27.             <br />  
  28.             <br />  
  29.             password:  
  30.             <s:password name="password">s:password>  
  31.             <br />  
  32.             <br />  
  33.             <s:submit value="提交" id="submit">s:submit>  
  34.   
  35.         div>  
  36.     body>  
  37. html>  

界面很简单 就是一个模拟登录的界面


2。。。。。。进行JS脚本编写

[javascript]  view plain  copy
  1. //对密码进行加密  
  2. $(document).ready(function() {  
  3.     $("#submit").click(function() {  
  4.         var psw = $("#password");  
  5.         var username = $("#username").val();  
  6.         var password = hex_md5(psw.val());  
  7.         alert(psw.val()+":"+password);  
  8.         $.post("Login.action",{"username":username,"password":password},function(data){alert(data);},"text");  
  9.         alert("123");  
  10.     }  
  11.   
  12.     );  
  13. })  


3。。。。。。。。进行后台action的编写


[java]  view plain  copy
  1. package com.action;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5.   
  6. import javax.servlet.http.HttpServletResponse;  
  7.   
  8. import org.apache.struts2.ServletActionContext;  
  9.   
  10. import com.opensymphony.xwork2.ActionSupport;  
  11.   
  12. public class Login extends ActionSupport{  
  13.     private String username;  
  14.     private String password;  
  15.     public String execute() throws Exception {    
  16.         System.out.println(password);  
  17.         HttpServletResponse response=ServletActionContext.getResponse();   
  18.         response.getWriter().write(username);   
  19.         System.out.println(username);  
  20.         return null;  
  21.     }  
  22.     public String getUsername() {  
  23.         return username;  
  24.     }  
  25.     public void setUsername(String username) {  
  26.         this.username = username;  
  27.     }  
  28.     public String getPassword() {  
  29.         return password;  
  30.     }  
  31.     public void setPassword(String password) {  
  32.         this.password = password;  
  33.     }  
  34.   
  35.   
  36. }  

4。。。。。。。。进行struts的配置


[html]  view plain  copy
  1. xml version="1.0" encoding="UTF-8" ?>  
  2.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
  3.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
  4.   
  5. <struts>  
  6.   
  7.     <constant name="struts.enable.DynamicMethodInvocation" value="true" />  
  8.     <constant name="struts.devMode" value="true" />  
  9.   
  10.     <package name="default"  extends="struts-default">  
  11.         <action name="Login" class="com.action.Login">  
  12.             <result>pages/admin.jspresult>  
  13.         action>  
  14.     package>  
  15.   
  16.       
  17.   
  18. struts>  

5。。。。。。。。。。。进行测试

测试结果为后台得到前台的username和加密后的password并在控制台进行了打印


前台直接返回alert弹出了输入的username


6。。。。。。配置完毕

你可能感兴趣的:(利用jquery框架中ajax实现前台与struts2中action交互)