摘要: 主要实现步骤如下: 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"> |
06 |
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > |
07 |
< title >Simpleton Demo | struts+ajax返回json类型数据</ title > |
09 |
< link rel = "shortcut icon" type = "image/x-icon" href = "images/Icon.png" /> |
10 |
< link rel = "stylesheet" type = "text/css" href = "styles/base.css" /> |
13 |
< body background = "images/bg.gif" > |
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 = "提交结果" /> |
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 > |
34 |
< div id = "authorgraph" >< img alt = "" src = "images/autograph.gif" ></ div > |
36 |
< script type = "text/javascript" src = "scripts/jquery-1.8.2.js" ></ script > |
37 |
< script type = "text/javascript" > |
42 |
var $btn = $("input.btn");//获取按钮元素 |
44 |
$btn.bind("click",function(){ |
48 |
url:"excuteAjaxJsonAction",//需要用来处理ajax请求的action,excuteAjax为处理的方法名,JsonAction为action名 |
50 |
name:$("input[name=name]").val(), |
51 |
age:$("input[name=age]").val(), |
52 |
position:$("input[name=position]").val()//这里不要加"," 不然会报错,而且根本不会提示错误地方 |
54 |
dataType:"json",//设置需要返回的数据类型 |
55 |
success:function(data){ |
56 |
var d = eval("("+data+")");//将数据转换成json类型,可以把data用alert()输出出来看看到底是什么样的结构 |
57 |
//得到的d是一个形如{"key":"value","key1":"value1"}的数据类型,然后取值出来 |
59 |
$("#s_name").text(""+d.name+""); |
60 |
$("#s_age").text(""+d.age+""); |
61 |
$("#s_position").text(""+d.position+""); |
72 |
$(document).ready(function(){ |
JsonAction.java代码
01 |
package com.simpleton.demo.action; |
03 |
import java.util.HashMap; |
06 |
import javax.servlet.http.HttpServletRequest; |
08 |
import net.sf.json.JSONObject; |
10 |
import org.apache.struts2.interceptor.ServletRequestAware; |
12 |
import com.opensymphony.xwork2.ActionSupport; |
14 |
public class JsonAction extends ActionSupport implements ServletRequestAware{ |
15 |
private static final long serialVersionUID = 1L; |
17 |
private HttpServletRequest request; |
18 |
private String result; |
20 |
public void setServletRequest(HttpServletRequest arg0) { |
23 |
public String getResult() { |
26 |
public void setResult(String result) { |
34 |
public String excuteAjax(){ |
38 |
String name = request.getParameter( "name" ); |
39 |
int age = Integer.parseInt(request.getParameter( "age" )); |
40 |
String position = request.getParameter( "position" ); |
42 |
//将数据存储在map里,再转换成json类型数据,也可以自己手动构造json类型数据 |
43 |
Map<String,Object> map = new HashMap<String,Object>(); |
44 |
map.put( "name" , name); |
46 |
map.put( "position" , position); |
48 |
JSONObject json = JSONObject.fromObject(map); //将map对象转换成json类型数据 |
49 |
result = json.toString(); //给result赋值,传递给页面 |
50 |
} catch (Exception e) { |
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"> |
08 |
< constant name = "struts.i18n.encoding" value = "UTF-8" ></ constant > |
10 |
< package name = "simpleton" extends = "struts-default,json-default" > |
12 |
< action name = "*JsonAction" method = "{1}" class = "com.simpleton.demo.action.JsonAction" > |
13 |
< result name = "fail" ></ result > |
16 |
< param name = "root" >result <!-- result是action中设置的变量名,也是页面需要返回的数据,该变量必须有setter和getter方法 --> </ param > |
这样就可以完成一个简单json数据类型传递的demo了。
- JQuery ajax 前后端传值介绍
https://jingyan.baidu.com/album/ca41422f0bf08e1eae99ed04.html?picindex=5 现在我们话不多说,开始仔细讲解一下我们ajax内部传递 ...
- Thymeleaf前后端传值 页面取值与js取值
参考: Thymeleaf前后端传值 页面取值与js取值 Thymeleaf 与 Javascript Thymeleaf教程 (十二) 标签内,js中使用表达式 目的: 后端通过Model传值到前端 ...
- thinkphp+jquery+ajax前后端交互注册验证
thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- JSON(及其在ajax前后端交互的过程)小识
一. json介绍 json是一种轻量级的数据交换格式,规则很简单: 并列的数据之间用逗号(,)分隔: 映射用冒号(:)表示: 并列数据的集合(数组)用方括号([])表示: 映射的集合(对象)用大括号 ...
- SSM-网站后台管理系统制作(4)---Ajax前后端交互
前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...
- springmvc前后端传值
@pathvible 后端传值(rest风格) exp: @requestMapping("/view/{userId}") public String getiew(@Parth ...
- SpringMVC踩坑3——前后端传值问题
在前端页面点击修改,同时把需要修改的ID传到后端,后端根据ID去修改具体数据 这是前端代码 <a href="${pageContext.request.contextPath}/bo ...
- springmvc前后端传值总结
1 前端向后端传参 1.1 普通方式传参 1.1.1 页面 参数需要解析成json对象:JSON.parse(JSON.stringify(query)) $.getJ ...
- AJAX 前后端交互 验证信息是否正确
1.前段: function checkPtCode(obj){ $.ajax({ type: "post", url: "xxxxxxx", data: {& ...
随机推荐
- MySQL数据库:RESET MASTER、RESET SLAVE、MASTER_INFO、RELAY_LOG_INFO
MySQL数据库:RESET MASTER.RESET SLAVE.MASTER_INFO.RELAY_LOG_INFO RESET MASTER 删除所有index file中记录的所有binlog ...
- GTID复制模式切换与传统主从复制间切换
GTID复制模式切换到传统主从复制主从复制环境:主库:10.18.10.11从库:10.18.10.12MySQL5.7.22 切换之前查看下主从gitd_mode参数值主服务器:gtid_mode值 ...
- JDBC之Statement 接口的测试(存在sql注入风险)
实现简单的登录功能 import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; impo ...
- 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第2节 匿名对象_6-匿名对象的说明
没有名字的对象,叫做匿名对象 新建一个Person类 把赵又廷赋值交给匿名对象Person里面的成员变量name 想调用里面的ShowName的话 还需要再定义一个匿名对象. 第三个对象是一个全新的. ...
- javascript 跳出循环比较
for continue 跳出当前循环,继续下一个循环 break 结束循环 forEach 不能使用continue , break return/return false 跳出当前循环,在forE ...
- [转载]OpenSSL中文手册之命令行详解(未完待续)
声明:OpenSSL之命令行详解是根据卢队长发布在https://blog.csdn.net/as3luyuan123/article/details/16105475的系列文章整理修改而成,我自己 ...
- c# asp.net uploadify 上传大文件 出现的 HTTP 404 问题
用uploadify在IIS6下上传大文件没有问题,但是迁移到IIS7下面,上传大文件时,出现HTTP 404错误. 查了半天,原来是IIS7下的默认设置限制了上传大小.这个时候Web.Config中 ...
- Smashing Nodejs 读书笔记(一)
了不起的Node.js:将JavaScript进行到底 书名:SMASHING Node.js : JavaScript Everywhere 原作者:(美)劳奇 Rauch.G 译者:赵静 出版日期 ...
- chineseocr项目的配置阶段出现的问题及解决方案
chineseocr为GitHub上的一个开源项目,主要使用yolos,crnn等深度学习框架训练好后的模型使用.测试结果发现,不管是针对文本文件.表格文件.还是场景图,如身份证火车票,识别效果都比较 ...
- 用jmeter监控服务器资源
jmeter可以监控服务器CPU.内存等性能参数,只需要安装一些插件,比其他方法更简单 1.下载需要的jmeter插件 如图上面两个是jmeter插件,可以再下面的链接中下载: https://jm ...