原文地址:struts2+jquery+json集成

以下采用struts2+jquery+json模拟一个案例。当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示。

效果如下:

接下来为struts2+jquery+json集成步骤:

1、新建一个web工程,导入struts2+jquery+json所需jar,如下图

目录结构图

2、创建实体类User

package com.ljq.bean;

import java.io.Serializable;

@SuppressWarnings("serial")
public class User implements Serializable {
private int id;
private String username;
private String pwd; public User() {
} public User(int id, String username, String pwd) {
super();
this.id = id;
this.username = username;
this.pwd = pwd;
} public int getId() {
return id;
} public void setId(int id) {
this.id = id;
} public String getUsername() {
return username;
} public void setUsername(String username) {
this.username = username;
} public String getPwd() {
return pwd;
} public void setPwd(String pwd) {
this.pwd = pwd;
} }

3、新建Action JsonAction

package com.ljq.action;

import net.sf.json.JSONObject;

import com.ljq.bean.User;
import com.opensymphony.xwork2.ActionSupport; @SuppressWarnings("serial")
public class JsonAction extends ActionSupport{
private User user;
// 返回结果给客户端
private String result; @Override
public String execute() throws Exception {
//将要返回的实体对象进行json处理
JSONObject json=JSONObject.fromObject(user);
//输出格式如:{"id":1, "username":"zhangsan", "pwd":"123"}
System.out.println(json);
result=json.toString();
return SUCCESS;
} 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;
} }

4、建立struts.xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<!-- 该属性指定需要Struts2处理的请求后缀,该属性的默认值是action,即所有匹配*.action的请求都由Struts2处理。
如果用户需要指定多个请求后缀,则多个后缀之间以英文逗号(,)隔开。 -->
<constant name="struts.action.extension" value="do" />
<!-- 设置浏览器是否缓存静态内容,默认值为true(生产环境下使用),开发阶段最好关闭 -->
<constant name="struts.serve.static.browserCache" value="false" />
<!-- 当struts的配置文件修改后,系统是否自动重新加载该文件,默认值为false(生产环境下使用),开发阶段最好打开 -->
<constant name="struts.configuration.xml.reload" value="true" />
<!-- 开发模式下使用,这样可以打印出更详细的错误信息 -->
<constant name="struts.devMode" value="true" />
<!-- 默认的视图主题 -->
<!-- <constant name="struts.ui.theme" value="simple" /> -->
<!-- <constant name="struts.objectFactory" value="spring" /> --> <package name="test" extends="json-default">
<action name="jsonAction" class="com.ljq.action.JsonAction">
<result type="json">
<!-- 此处将reslut的值返回给客户端,root的值对应要返回的值的属性result
注意:root为固定写法,否则不会把result的值返回给客户端 -->
<param name="root">result</param>
</result>
</action>
</package> </struts>

5、编写index.jsp文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%
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="<%=request.getContextPath() %>/js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/index.js"></script>
<!-- <s:head theme="ajax" />这句话好像没影响哦 -->
<!-- <s:head theme="ajax" />-->
<!--在jsp页面上加入<s:head theme="ajax" />会报如下异常:java.io.FileNotFoundException:
Template /template/ajax/head.ftl not found.
解决办法:在struts2-core-2.1.8.jar/template目录下加入ajax文件夹,ajax文件夹所在目录为
struts2-core-2.1.8.jar/template/archive。
注意:ajax文件夹下要包含head.ftl,否则还是会抛异常。head.ftl请在template目录搜索然后放到ajax文件夹里
-->
</head> <body>
<!-- 显示User实体对象 -->
<div id="result"></div>
<s:form name="userForm" action="/jsonAction.do" method="post">
编号:<input name="user.id"/><br/>
用户名:<input name="user.username"/><br/>
密码:<input name="user.pwd"/><br/><br/>
<input id="btn" type="button" value=" 提 交 "/>
</s:form> </body>
</html>

6、建立文件index.js

$(document).ready(function(){
//点击提交按钮时,从服务端获取数据,然后在客户端显示
$("#btn").click(function(){
// 序列化表单的值
var params=$("input").serialize();
$.ajax({
url: "jsonAction.do",
// 数据发送方式
type: "post",
// 接受数据格式
dataType : "json",
// 要传递的数据
data : params,
// 回调函数,接受服务器端返回给客户端的值,即result值
success : show
});
});
}); function show(result){
//测试result是否从服务器端返回给客户端
//alert(result);
//解析json对象
var json = eval("("+result+")");
var obj = "编号: "+json.id+" 用户名: "+json.username+" 密码: "+json.pwd;
$("#result").html(obj);
}

留存: struts2+jquery+json集成的更多相关文章

  1. struts2+jquery+json集成

    以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: 接下来为struts2+jquery+json集成步 ...

  2. struts2 + jquery + json 简单的前后台信息交互

    ajax 是一种客户端与服务器端异步请求的交互技术.相比同步请求,大大提高了信息交互的速度和效率.是当下非常实用和流行的技术. 这里简单的说明 struts2 + jquery + json 下的 信 ...

  3. Struts2+JQuery+Json登陆实例

    Struts2+JQuery+Json登陆实例 博客分类: Struts2   在搭建之前.. 首先,需要准备struts2.0框架的5个核心包, 以及jsonplugin-0.32.jar 以及js ...

  4. Struts2+JQuery+JSON实现异步交互

    1.环境 jquery:jquery-1.9.0.min.js struts2:基本包就不说了,就说说应用json的包,主要有struts2-json-plugin-2.3.8.jar json:js ...

  5. Struts2+jQuery+Json零配置实现ajax

    (一)Jsp页面代码 <%@ page language="java" import="java.util.*" pageEncoding="U ...

  6. struts2+jquery +json实现异步加载数据,亲测(原创)

    //初始加载页面时 $(document).ready(function(){ //为获取单个值的按钮注册鼠标单击事件 $("#getMessage").click(functio ...

  7. 【转】Struts2中json插件的使用

    配置注意点: 在原有Struts2框架jar包的引入下,需要额外多加一个Json的插件包(struts2-json-plugin-2.3.7.jar) 在struts.xml配置文件中,包需要继承js ...

  8. Struts2+Jquery实现ajax并返回json类型数据

    来源于:http://my.oschina.net/simpleton/blog/139212 摘要 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的 ...

  9. 转载:Struts2+Jquery实现ajax并返回json类型数据

    摘要: 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的数据,并转换为json类型模式数据 3.配置struts.xml文件 4.页面脚本接受并处理数 ...

随机推荐

  1. mongose TypeError: Cannot read property 'findOne' of undefined

    最近在node的一个项目中,需要在model的一个数据表中写一个钩子函数去调用另外一个文件中的方法,一开始我采用了将此方法放入到global中,直接从global.meteod这样去获取.后来我又尝试 ...

  2. Fast-tracking approach for building routing topologies in fast-moving networks

    In one embodiment, a local node in a communication network determines a set of its neighbor nodes, a ...

  3. 仿照Android的池化技术

    /** * 仿照Android池化技术 * @author fgtian * */ public class ObjectCacheTest { public static class ObjectI ...

  4. Android app设置全屏模式

    Android中,为APP设置全屏模式,主要有如下几种方式: 在manifest中设置 在项目中找到AndroidManifest.xml配置文件,找到Activity所在的节点,添加theme. & ...

  5. Delphi 禁用x64位系统文件重定向功能

    在X64系统里面,一些特殊的目录和特殊的注册表键被分为2个独立的部分.对于文件系统来说,      %systemroot%\system32 目录被保留给64位文件使用,而32位文件会被重定向到%s ...

  6. 数学思想方法-python计算战(8)-机器视觉-二值化

    二值化 hreshold Applies a fixed-level threshold to each array element. C++: double threshold(InputArray ...

  7. 创Python规划2

    于Milang的IDE多年的编辑后,,然后按F5关于实施.这将是在下面Output输出形式"Hello, World!"弦,例如下面的附图: watermark/2/text/aH ...

  8. Tomcat 8(十)HTTP/AJP Connector、Bio/Nio/Apr性能对照

    Tomcat 8(七)解读Bootstrap介绍过,Connector初始化/启动的时候,将初始化/启动内部的ProtocolHandler.事实上ProtocolHandler仅仅是个接口 Prot ...

  9. sdutoj1225--编辑距离(dp:字符串转换)

    编辑距离 nid=24#time" style="padding-bottom:0px; margin:0px; padding-left:0px; padding-right:0 ...

  10. ORACLE 时间加减操作

    DATE和timestamp类型都可以进行加减操作.可以对当前日期加年.月.日.时.分.秒,操作不同的时间类型,有三种方法: 1 使用内置函数numtodsinterval增加小时,分钟和秒2 加一个 ...