您的位置：首页 > Web前端 > JQuery

Struts2+jquery+Ajax实现json数据的传输

2017-04-29 19:56 141 查看

javaweb在使用前后台数据交互时，常常用到Ajax的异步传输来减少数据传输量，让页面局部刷新，而不影响整体页面。

json作为一种简单的轻量级的数据交换格式，大量用于前后台数据交换的格式，类似于map，也是键值关系的。

Jquery.js中集成了Ajax的处理函数，接下来介绍Struts2框架下使用Ajax来让前台获取一段json数据

我用的是myeclipse10，直接导入的jar包，里面的struts2的jar也包含了json的jar，其中缺少一个包，就是ezmorph.jar,这是java处理json格式转换的必备jar，不引不会报错，但是前台无法接收json数据

下载地址：点击下载资源，下载导入即可。

首先我们来看前台页面。

index.jsp

<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%@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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script src="js/jquery.js" type="text/javascript"></script>
<style type="text/css">
.time{
width:300px;
background:#666;
}
.main{
width:300px;
height: 400px;
background: #f60;
}
</style>
<script type="text/javascript">
function btn(){

$.ajax({
//提交方式
type:"post",
//提交的Action
url:"demoAction",
data:{
//提交的数据
name:$("input[name=name]").val(),
age:$("input[name=age]").val()
},
//返回数据类型
dataType:"json",
success:function(data){
//eval()是JS中将JSON的字符串解析成JSON数据格式的一种方法
var d = eval(data);
//将解析的de数据放入相应的id中
$("#s_name").text(""+d.name+"");
$("#s_age").text(""+d.age+"");
},
error:function(data)
{
//失败的话
alert("fail");
},
});

}

</script>

</head>

<body>
<div class="time" name="time">
<%
SimpleDateFormat fomatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date currentTime = new Date();
String str = fomatter.format(currentTime);
%>
<%=str %>
</div>
<form action="#" method = "post">
name:<input type="text" name="name"/>
age:<input type="text" name="age"/>
<input type="button" class="btn" value="submit" onclick="btn()"/>
</form>
<div class="main" name="main">
<span id="s_name">nnnn</span>
<span id="s_age">aaaa</span>
</div>
</body>
</html>

运行图如下：

上面的时间就是验证异步传输，也就是只有橙色div会刷新，整个页面不会刷新

这时，我们输入相应的name和age。

进入Action的代码

DemoAction.java

package com.action;

import java.util.HashMap;
import java.util.Map;

import net.sf.json.JSONObject;

import com.opensymphony.xwork2.ActionSupport;

public class DemoAction extends ActionSupport {
//获取name和age
private String name;
private String age;
//构造返回的json数据
private JSONObject result;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getAge() {
return age;
}

public void setAge(String age) {
this.age = age;
}

public JSONObject getResult() {
return result;
}

public void setResult(JSONObject result) {
this.result = result;
}

@Override
public String execute() throws Exception {
// TODO Auto-generated method stub

System.out.println(name);
System.out.println(age);
Map<String, Object> map = new HashMap<String, Object>();
map.put("name", name);
map.put("age", age);

result = JSONObject.fromObject(map);

return SUCCESS;
}
}

接下来是配置struts.xml。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<package name="default" extends="struts-default,json-default" namespace="">
<action name="demoAction" class="com.action.DemoAction">
<result type="json">
<!-- 这里的result名字对应着action中jsonObject那个，必须有get,set方法 -->
<param name="root">result</param>
</result>
</action>
</package>
</struts>

然后跑一下就可以了，我们只是验证，所以我只是完成了数据传入后台，封装成json，再返回前台，通过js中eval()函数解析，将数据注入到一个div中的过程。

运行结果

可以多次输入，看到，那个时间在页面未刷新的情况下不改变，也就是说只有橙色在刷新，那么久大大减少了数据流的传输。

会了这个小Demo之后，就可实现数据的传输，然后处理，再返回了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： struts jquery ajax

相关文章推荐

新的分享

章节导航