jquery + struts2 + json示例

本文介绍如何使用Struts2与jQuery结合JSON进行数据交互。通过具体示例演示了在regist.jsp页面中输入用户编号和名称后,通过Ajax调用Struts2 Action,并在页面上动态展示返回的用户信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文主要是演示一下怎么在 jquery + struts2 下使用json 来传数据,实现的效果很简单,在页面输入 “用户编号”和“用户名称” 下面用一个层来显示。

首先是regist.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %> 
<%
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> 
    <title>Regist.jsp</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="<%=basePath %>script/jquery-1.3.2.js"></script> 
  <script language="javascript" type="text/javascript"> 
  function showPersonInfo() 
  { 
      var authorid = $("#authorid").val(); 
      var authorname=$("#authorname").val();
      var url ="<%=request.getContextPath() %>/personAjaxAction.action";
    $.post(url,{authorid:authorid,authorname:authorname},callback,"json"); 

  } 
  function callback(data) 
  { 
      var rs = data.person 
     var html = ""; 
      html+="<table><tr><td>用户编号:</td><td>"+rs.authorid+"</td></tr><tr><td>用户名称:</td>     <td>"+rs.authorname+"</td></tr>"; 
    $("#showPersonInfo").html(html); 
  } 
  </script> 
  </head> 
  <body> 
    <form method="post"> 
    用户编号:<input type="text" id="authorid" name="person.authorid"/><br> 
    用户名称:<input type="text" id="authorname" name="person.authorname"/><br> 
    <input type="button" value="ajax" name="ajaxsubmit" onclick="showPersonInfo();"/> 
    </form> 
    <div id="showPersonInfo"></div> 
  </body> 
</html>

 

web.xml的配置:

<?xml version="1.0" encoding="ISO-8859-1"?> 
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> 
<web-app> 
    <display-name>Struts 2.0 Hello World</display-name> 
    <filter> 
        <filter-name>struts2</filter-name>        
        <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class> 
    </filter> 
    <filter-mapping> 
        <filter-name>struts2</filter-name> 
        <url-pattern>/*</url-pattern> 
    </filter-mapping> 
    <welcome-file-list> 
        <welcome-file>index.jsp</welcome-file> 
    </welcome-file-list> 
</web-app>

 

struts.xml 的配置:

<!DOCTYPE struts PUBLIC 
        "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 
        "http://struts.apache.org/dtds/struts-2.0.dtd"> 
        
<struts> 
    <constant name="struts.i18n.encoding" value="UTF-8"></constant> 
    <!--  
    <package name="tutorial" extends="struts-default"> 
        <action name="personAction" class="tutorial.entity.PersonAction"> 
            <result>/regist.jsp</result> 
        </action> 
    </package> 
    -->
    <package name="personjson" extends="json-default" namespace="/"> 
        <action name="personAjaxAction" class="tutorial.entity.PersonAction" method="showPersonInfo"> 
            <result type="json"/>                
        </action> 
    </package> 
</struts> 

 PersonAction 的源码:

package tutorial.entity;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.interceptor.ServletRequestAware;

import com.opensymphony.xwork2.ActionSupport;

public class PersonAction extends ActionSupport implements ServletRequestAware {

	private static final long serialVersionUID = 4787323253923443929L; 

    private HttpServletRequest request; 
    
    private Person person; 


    public void setServletRequest(HttpServletRequest request) { 
        this.request = request; 
    } 

    public String showPersonInfo() 
    { 
        person = new Person(); 
        person.setAuthorid(request.getParameter("authorid")); 
        person.setAuthorname(request.getParameter("authorname")); 
        return SUCCESS; 
    } 
    
    public Person getPerson() { 
        return person; 
    } 

    public void setPerson(Person person) { 
        this.person = person; 
    } 

}

 

所使用到的包:

 

commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
commons-logging-1.0.4.jar
commons-logging-1.1.jar
freemarker-2.3.16.jar
javassist-3.7.ga.jar
json-lib-2.1-jdk15.jar
log4j-1.2.11.jar
ognl-3.0.jar
struts2-core-2.2.1.1.jar
struts2-json-plugin-2.2.1.1.jar
xwork-core-2.2.1.1.jar

 

我使用的struts是2.2.1 版本 jdk是1.5的 tomcat是5.X 。其中的:

commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
freemarker-2.3.16.jar
javassist-3.7.ga.jar
ognl-3.0.jar
struts2-core-2.2.1.1.jar
xwork-core-2.2.1.1.jar

可以下一个struts包在 路径“struts-2.2.1.1\apps\struts2-blank\WEB-INF\lib”

下找到。

 

json-lib-2.1-jdk15.jar
struts2-json-plugin-2.2.1.1.jar

这两个包在struts-2.2.1.1\lib 下可以找到。

 

做这个例子真是麻烦,首先是tomcat5.X和jdk1.5 的包冲突,tomcat启动不了。后来能起来了,又报404错,网上查了半天发现是struts的版本和json的版本对不上。

 

虽然功能实现了但是有一点我还是不明白,PersonAction 的showPersonInfo 方法只返回一个“SUCCESS” ,而回调函数就能用data.person来访问 person ,是不是回调方法的data参数封装了PersonAction 的所有成员变量。哪为大侠弄明白了,说一下,谢谢!

标题基于SpringBoot+Vue的社区便民服务平台研究AI更换标题第1章引言介绍社区便民服务平台的研究背景、意义,以及基于SpringBoot+Vue技术的研究现状和创新点。1.1研究背景与意义分析社区便民服务的重要性,以及SpringBoot+Vue技术在平台建设中的优势。1.2国内外研究现状概述国内外在社区便民服务平台方面的发展现状。1.3研究方法与创新点阐述本文采用的研究方法和在SpringBoot+Vue技术应用上的创新之处。第2章相关理论介绍SpringBoot和Vue的相关理论基础,以及它们在社区便民服务平台中的应用。2.1SpringBoot技术概述解释SpringBoot的基本概念、特点及其在便民服务平台中的应用价值。2.2Vue技术概述阐述Vue的核心思想、技术特性及其在前端界面开发中的优势。2.3SpringBoot与Vue的整合应用探讨SpringBoot与Vue如何有效整合,以提升社区便民服务平台的性能。第3章平台需求分析与设计分析社区便民服务平台的需求,并基于SpringBoot+Vue技术进行平台设计。3.1需求分析明确平台需满足的功能需求和性能需求。3.2架构设计设计平台的整体架构,包括前后端分离、模块化设计等思想。3.3数据库设计根据平台需求设计合理的数据库结构,包括数据表、字段等。第4章平台实现与关键技术详细阐述基于SpringBoot+Vue的社区便民服务平台的实现过程及关键技术。4.1后端服务实现使用SpringBoot实现后端服务,包括用户管理、服务管理等核心功能。4.2前端界面实现采用Vue技术实现前端界面,提供友好的用户交互体验。4.3前后端交互技术探讨前后端数据交互的方式,如RESTful API、WebSocket等。第5章平台测试与优化对实现的社区便民服务平台进行全面测试,并针对问题进行优化。5.1测试环境与工具介绍测试
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值