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

网上看到很多关于Struts2+ajax+jquery+json的例子，但是很多都不完整，也看不明白，主要原因是返回jsno类型数据和原来的返回字符串类型数据不一样，并且网友们实现步骤没有说清楚，让初学的朋友捉摸不透到底该怎么做。

我做了个简单的demo，供网友们学习，最后我会附上链接，可以下载整个demo.

首先需要的包（struts核心包和json需要的包）：

struts核心包：

json需要的包：

commons-logging-*.jar在导入struts核心包的时候就导入了，所以导入json包的时候可以去掉这个包

页面效果：

json_demo.jsp页面（该页面引用了jquery文件，我用的版本是jquery-1.8.2.js，如果使用版本不同，请自行修改）：

01 <%@ page language="java" contentType="text/html; charset=UTF-8"
02     pageEncoding="UTF-8"%>
03 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
04 <html>
05 <head>
06 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
07 <title>Simpleton Demo | struts+ajax返回json类型数据</title>
08  
09 <link rel="shortcut icon" type="image/x-icon" href="images/Icon.png" />
10 <link rel="stylesheet" type="text/css" href="styles/base.css" />
11  
12 </head>
13 <body background="images/bg.gif">
14      
15     <div id="div_json">
16         <h5>录入数据</h5>
17         <br />
18         <form action="#" method="post">
19             <label for="name">姓名：</label><input type="text" name="name" />
20             <label for="age">年龄：</label><input type="text" name="age" />
21             <label for="position">职务：</label><input type="text" name="position" />
22             <input type="button" class="btn" value="提交结果"/>
23         </form>
24         <br />
25         <h5>显示结果</h5>
26         <br />
27         <ul>
28             <li>姓名：<span id="s_name">赞无数据</span></li>
29             <li class="li_layout">年龄：<span id="s_age">暂无数据</span></li>
30             <li class="li_layout">职务：<span id="s_position">暂无数据</span></li>
31         </ul>
32     </div>
33      
34     <div id="authorgraph"><img alt="" src="images/autograph.gif"></div>
35      
36     <script type="text/javascript" src="scripts/jquery-1.8.2.js"></script>
37     <script type="text/javascript">
38          
39         /* 提交结果，执行ajax */
40         function btn(){
41              
42             var $btn = $("input.btn");//获取按钮元素
43             //给按钮绑定点击事件
44             $btn.bind("click",function(){
45                  
46                 $.ajax({
47                     type:"post",
48                     url:"excuteAjaxJsonAction",//需要用来处理ajax请求的action,excuteAjax为处理的方法名，JsonAction为action名
49                     data:{//设置数据源
50                         name:$("input[name=name]").val(),
51                         age:$("input[name=age]").val(),
52                         position:$("input[name=position]").val()//这里不要加","  不然会报错，而且根本不会提示错误地方
53                     },
54                     dataType:"json",//设置需要返回的数据类型
55                     success:function(data){
56                         var d = eval("("+data+")");//将数据转换成json类型，可以把data用alert()输出出来看看到底是什么样的结构
57                         //得到的d是一个形如{"key":"value","key1":"value1"}的数据类型，然后取值出来
58                          
59                         $("#s_name").text(""+d.name+"");
60                         $("#s_age").text(""+d.age+"");
61                         $("#s_position").text(""+d.position+"");
62                          
63                     },
64                     error:function(){
65                         alert("系统异常，请稍后重试！");
66                     }//这里不要加","
67                 });
68             });
69         }
70      
71         /* 页面加载完成，绑定事件 */
72         $(document).ready(function(){          
73             btn();//点击提交，执行ajax
74         });
75     </script>
76 </body>
77 </html>

JsonAction.java代码

01 package com.simpleton.demo.action;
02  
03 import java.util.HashMap;
04 import java.util.Map;
05  
06 import javax.servlet.http.HttpServletRequest;
07  
08 import net.sf.json.JSONObject;
09  
10 import org.apache.struts2.interceptor.ServletRequestAware;
11  
12 import com.opensymphony.xwork2.ActionSupport;
13  
14 public class JsonAction extends ActionSupport implements ServletRequestAware{
15     private static final long serialVersionUID = 1L;
16      
17     private HttpServletRequest request;
18     private String result;
19  
20     public void setServletRequest(HttpServletRequest arg0) {
21         this.request = arg0;
22     }
23     public String getResult() {
24         return result;
25     }
26     public void setResult(String result) {
27         this.result = result;
28     }
29      
30     /**
31      * 处理ajax请求
32      * @return SUCCESS
33      */
34     public String excuteAjax(){
35          
36         try {
37             //获取数据
38             String name = request.getParameter("name");
39             int age = Integer.parseInt(request.getParameter("age"));
40             String position = request.getParameter("position");
41              
42             //将数据存储在map里，再转换成json类型数据，也可以自己手动构造json类型数据
43             Map<String,Object> map = new HashMap<String,Object>();
44             map.put("name", name);
45             map.put("age",age);
46             map.put("position", position);
47              
48             JSONObject json = JSONObject.fromObject(map);//将map对象转换成json类型数据
49             result = json.toString();//给result赋值，传递给页面
50         } catch (Exception e) {
51             e.printStackTrace();
52         }
53         return SUCCESS;
54     }
55  
56  
57      
58 }

struts.xml中

01 <?xml version="1.0" encoding="UTF-8"?>
02 <!DOCTYPE struts PUBLIC
03     "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
04     "http://struts.apache.org/dtds/struts-2.0.dtd">
05 <struts>
06      
07     <!--解决乱码    -->
08     <constant name="struts.i18n.encoding" value="UTF-8"></constant>
09      
10     <package name="simpleton" extends="struts-default,json-default">
11          
12         <action name="*JsonAction" method="{1}"class="com.simpleton.demo.action.JsonAction">
13             <result name="fail"></result>
14             <!-- 返回json类型数据 -->
15             <result type="json">
16                 <param name="root">result<!-- result是action中设置的变量名，也是页面需要返回的数据，该变量必须有setter和getter方法 --></param>
17             </result>
18         </action>
19          
20     </package>
21      
22 </struts>

这样就可以完成一个简单json数据类型传递的demo了。

struts2+ajax 前后端传值的更多相关文章

  1. JQuery ajax 前后端传值介绍

    https://jingyan.baidu.com/album/ca41422f0bf08e1eae99ed04.html?picindex=5 现在我们话不多说,开始仔细讲解一下我们ajax内部传递 ...

  2. Thymeleaf前后端传值 页面取值与js取值

    参考: Thymeleaf前后端传值 页面取值与js取值 Thymeleaf 与 Javascript Thymeleaf教程 (十二) 标签内,js中使用表达式 目的: 后端通过Model传值到前端 ...

  3. thinkphp+jquery+ajax前后端交互注册验证

    thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  4. JSON（及其在ajax前后端交互的过程）小识

    一. json介绍 json是一种轻量级的数据交换格式,规则很简单: 并列的数据之间用逗号(,)分隔: 映射用冒号(:)表示: 并列数据的集合(数组)用方括号([])表示: 映射的集合(对象)用大括号 ...

  5. SSM-网站后台管理系统制作（4）---Ajax前后端交互

    前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...

  6. springmvc前后端传值

    @pathvible 后端传值(rest风格) exp: @requestMapping("/view/{userId}") public String getiew(@Parth ...

  7. SpringMVC踩坑3——前后端传值问题

    在前端页面点击修改,同时把需要修改的ID传到后端,后端根据ID去修改具体数据 这是前端代码 <a href="${pageContext.request.contextPath}/bo ...

  8. springmvc前后端传值总结

    1      前端向后端传参 1.1    普通方式传参 1.1.1         页面 参数需要解析成json对象:JSON.parse(JSON.stringify(query)) $.getJ ...

  9. AJAX 前后端交互 验证信息是否正确

    1.前段: function checkPtCode(obj){ $.ajax({ type: "post", url: "xxxxxxx", data: {& ...

随机推荐

  1. kvm中添加VNC密码

      #virsh edit 虚机名 <graphics type='vnc' port='5901' autoport='no' listen='0.0.0.0' keymap='en-us'/ ...

  2. 软件-工具：Beyond Compare

    ylbtech-软件-工具:Beyond Compare 1.返回顶部 1. Beyond Compare是一套由Scooter Software推出的文件比较工具.主要用途是对比两个文件夹或者文件, ...

  3. VMware vSphere 虚拟化简介

    目录 目录 vSphere 简介 vSphere 提供的工具 vCenter vCenter 的功能 vCenter 管理界面上提供的操作功能 HOST CLUSTER TEMPLATE Virtua ...

  4. jmeter之分布式压测

    很多性能大牛说一台机器的压测其实不准确,于是搜索网上的分布式压测练习了一番 目录 1.环境准备 2.控制机和压测机配置 3.执行分布式压测 1.环境准备 1.1准备一台windows作为控制机(mas ...

  5. 使用K近邻算法改进约会网站的配对效果

    1 定义数据集导入函数 import numpy as np """ 函数说明:打开并解析文件,对数据进行分类:1 代表不喜欢,2 代表魅力一般,3 代表极具魅力 Par ...

  6. Hadoop and Big Data

    Hadoop(1): HDFS Basics Hadoop(2):HDFS Block Management Hadoop(3): Prepare inputs for MapReduce mappe ...

  7. Linux apt-get命令的基本使用

    学习笔记,如有侵权,立即删除! 什么是apt-get ? Ubuntu源自Debian Linux.Debian使用dpkg打包系统.包装系统是一种为安装提供程序和应用程序的方法.这样,您就不必从源代 ...

  8. python+selenium的WebElement对象操作

    webelement对象操作 webelement对象是selenium中所有元素的父类,也就是webelement对象拥有的方法,其它元素对象都会有: 只是不同的对象在调用特定方法时,效果是不一样的 ...

  9. Oracle的substr函数简单用法(转)

    转:http://www.cnblogs.com/nicholas_f/articles/1526063.html substr(字符串,截取开始位置,截取长度) //返回截取的字 substr('H ...

  10. PyTorch笔记之 squeeze() 和 unsqueeze()

    1.squeeze() 函数 squeeze() 用来去掉向量的一个维度,只有维度为 1 的那一维才能去掉 example: 初始化1个向量shape为(1,2,3)的向量 import torch ...