移动应用实战（移动OA）之三_客户端与服务端数据通讯
2016-09-30 14:30
477 查看
移动应用实战（移动OA）之三_客户端与服务端数据通讯
我们的页面都是静态页面，即纯html代码，后台还是使用ssh框架。
下面我们来完成一个示例，上传用户id，取得用户的详细信息显示在界面中：
在这个示例中，有一系列技术问题需要我们解决：
1. struts2中如何返回json格式数据？
2. 静态页面中如何使用ajax访问后台，并获取用户信息，更新界面？
3. 跨域问题如何解决？
下面，我们逐一解决这些问题。
一、struts2返回json数据
这里的要点是：
1. Action类需要继承自ActionSupport类
2. Action类前加上注解：@ParentPackage("json-default")，表示该类的父包是json-default，默认情况下父包是struts-default，它不能返回json数据
3. 添加一个@Result注解，用于json格式的返回：
@Results({ @Result(name = "getUserAJAXOK", type = "json", params = { "root", "user"}) }) 这个结果页，它的类型是json，这很重要。然后params是参数，默认情况下，struts2会把这个类中的所有属性（只要有get/set方法），全部通过json格式返回给客户端，声明root，则只有指定名称的属性会包含在json中。
参考页面代码： @ParentPackage("json-default")
@Results({ @Result(name = "getUserAJAXOK", type = "json", params = { "root", "user"}) })
public class UserAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private int id;
private User user;
@Action(value = "getUserAJAX")
public String getUserAJAX() {
user = new User();
if (id == 1) {
user.setId(1);
user.setName("张三");
user.setDept("财务部");
user.setCompany("百度");
user.setEmail("123456789@qq.com");
user.setPhone("13333333333");
}
return "getUserAJAXOK";
} 代码中省略了get/set方法。
二、html代码：
在head部分添加如下代码：
<script>
$(document).ready(function() {
$("#grxx").on("tap",function(){
$.getJSON("http://localhost:8080/oa/getUserAJAX.action",
{"id": "1"},
function(data) {
$("#uname").html(data.name);
$("#dept").html(data.dept);
$("#company").html(data.company);
$("#email").html(data.email);
$("#phone").html(data.phone);
}
);
});
});
</script> tap事件是触碰事件，相当于PC上的click事件，当点击“导航栏”上的“个人信息”按钮时，调用jQuery的getJSON方法，访问后台，取得json数据。
getJSON方法有三个参数，第一个参数是url，即后台Action的访问路径，第二个参数是上传给后台的数据，第三个参数是回调函数，即后台将数据回传给前台时，前台应如何处理数据。在这里，我们把后台数据依次填充到各个区块。
三、跨域问题
按照上述思路编写代码，发现数据还是不能正常读入。因为脚本访问都存在跨域问题，即浏览器不允许JavaScript脚本访问不是同一个域名的资源。
可以自行搜索“跨域问题”以查看详细说明。
解决方法：
1. 在struts2的Action中多加一个参数：
@Results({ @Result(name = "getUserAJAXOK", type = "json", params = { "root",
"user", "callbackParameter", "callback" }) }) 这个参数名叫“callbackParameter”，值为callback，这个值应与页面部分一致。
2. 页面部分的url改为：
$.getJSON("http://localhost:8080/oa/getUserAJAX.action?callback=?", url部分多加了一个参数叫callback，值为?即可
四、完整代码
1. 后台
后台为简便测试，没有写DAO类和BIZ类，直接在Action中加入数据。
后台文件结构：
User.java代码：
public class User {
private int id;
private String name;
private String dept;
private String company;
private String email;
private String phone;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDept() {
return dept;
}
public void setDept(String dept) {
this.dept = dept;
}
public String getCompany() {
return company;
}
public void setCompany(String company) {
this.company = company;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
}
UserAction.java代码：
@ParentPackage("json-default")
@Results({ @Result(name = "getUserAJAXOK", type = "json", params = { "root",
"user", "callbackParameter", "callback" }) })
public class UserAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private int id;
private User user;
@Action(value = "getUserAJAX")
public String getUserAJAX() {
user = new User();
if (id == 1) {
user.setId(1);
user.setName("张三");
user.setDept("财务部");
user.setCompany("百度");
user.setEmail("123456789@qq.com");
user.setPhone("13333333333");
}
return "getUserAJAXOK";
}
// getter & setter
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
}
2. 前台
grxx.html代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$(document).ready(function() {
$("#grxx").on("tap",function(){
$.getJSON("http://localhost:8080/oa/getUserAJAX.action?callback=?",
{"id": "1"},
function(data) {
$("#uname").html(data.name);
$("#dept").html(data.dept);
$("#company").html(data.company);
$("#email").html(data.email);
$("#phone").html(data.phone);
}
);
});
});
</script>
<style type="text/css">
.dark {
color: #CCC;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" data-theme="b">
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext">首页</a>
<h1>个人信息</h1>
</div>
<div data-role="content" data-theme="d">
<ul data-role="listview" data-inset="true">
<li>
<a href="#"><img src="images/head1.png"></a>
</li>
<li data-role="list-divider"></li>
<li><div class="ui-grid-a"><div class="ui-block-a">用户名</div><div class="ui-block-b dark" id="uname"></div></div></li>
<li><div class="ui-grid-a"><div class="ui-block-a">所在部门</div><div class="ui-block-b dark" id="dept"></div></div></li>
<li><div class="ui-grid-a"><div class="ui-block-a">所属公司</div><div class="ui-block-b dark" id="company"></div></div></li>
<li data-role="list-divider"></li>
<li><div class="ui-grid-a"><div class="ui-block-a">邮箱</div><div class="ui-block-b dark" id="email"></div></div></li>
<li data-role="list-divider"></li>
<li><div class="ui-grid-a"><div class="ui-block-a">手机号码</div><div class="ui-block-b dark" id="phone"></div></div></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="c">
<div data-role="navbar">
<ul>
<li><a id="gg" href="gg.html"><img src="images/gg.png" /><br />公告</a></li>
<li><a id="sp" href="sp.html"><img src="images/sp.png" /><br />审批</a></li>
<li><a id="qd" href="qd.html"><img src="images/qd.png" /><br />签到</a></li>
<li><a id="hys" href="hys.html"><img src="images/hys.png" /><br />会议室</a></li>
<li><a id="grxx" href="grxx.html" class="ui-btn-active ui-state-persist"><img src="images/grxx.png" /><br />个人信息</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
我们的页面都是静态页面，即纯html代码，后台还是使用ssh框架。
下面我们来完成一个示例，上传用户id，取得用户的详细信息显示在界面中：
在这个示例中，有一系列技术问题需要我们解决：
1. struts2中如何返回json格式数据？
2. 静态页面中如何使用ajax访问后台，并获取用户信息，更新界面？
3. 跨域问题如何解决？
下面，我们逐一解决这些问题。
一、struts2返回json数据
这里的要点是：
1. Action类需要继承自ActionSupport类
2. Action类前加上注解：@ParentPackage("json-default")，表示该类的父包是json-default，默认情况下父包是struts-default，它不能返回json数据
3. 添加一个@Result注解，用于json格式的返回：
@Results({ @Result(name = "getUserAJAXOK", type = "json", params = { "root", "user"}) }) 这个结果页，它的类型是json，这很重要。然后params是参数，默认情况下，struts2会把这个类中的所有属性（只要有get/set方法），全部通过json格式返回给客户端，声明root，则只有指定名称的属性会包含在json中。
参考页面代码： @ParentPackage("json-default")
@Results({ @Result(name = "getUserAJAXOK", type = "json", params = { "root", "user"}) })
public class UserAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private int id;
private User user;
@Action(value = "getUserAJAX")
public String getUserAJAX() {
user = new User();
if (id == 1) {
user.setId(1);
user.setName("张三");
user.setDept("财务部");
user.setCompany("百度");
user.setEmail("123456789@qq.com");
user.setPhone("13333333333");
}
return "getUserAJAXOK";
} 代码中省略了get/set方法。
二、html代码：
在head部分添加如下代码：
<script>
$(document).ready(function() {
$("#grxx").on("tap",function(){
$.getJSON("http://localhost:8080/oa/getUserAJAX.action",
{"id": "1"},
function(data) {
$("#uname").html(data.name);
$("#dept").html(data.dept);
$("#company").html(data.company);
$("#email").html(data.email);
$("#phone").html(data.phone);
}
);
});
});
</script> tap事件是触碰事件，相当于PC上的click事件，当点击“导航栏”上的“个人信息”按钮时，调用jQuery的getJSON方法，访问后台，取得json数据。
getJSON方法有三个参数，第一个参数是url，即后台Action的访问路径，第二个参数是上传给后台的数据，第三个参数是回调函数，即后台将数据回传给前台时，前台应如何处理数据。在这里，我们把后台数据依次填充到各个区块。
三、跨域问题
按照上述思路编写代码，发现数据还是不能正常读入。因为脚本访问都存在跨域问题，即浏览器不允许JavaScript脚本访问不是同一个域名的资源。
可以自行搜索“跨域问题”以查看详细说明。
解决方法：
1. 在struts2的Action中多加一个参数：
@Results({ @Result(name = "getUserAJAXOK", type = "json", params = { "root",
"user", "callbackParameter", "callback" }) }) 这个参数名叫“callbackParameter”，值为callback，这个值应与页面部分一致。
2. 页面部分的url改为：
$.getJSON("http://localhost:8080/oa/getUserAJAX.action?callback=?", url部分多加了一个参数叫callback，值为?即可
四、完整代码
1. 后台
后台为简便测试，没有写DAO类和BIZ类，直接在Action中加入数据。
后台文件结构：
User.java代码：
public class User {
private int id;
private String name;
private String dept;
private String company;
private String email;
private String phone;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDept() {
return dept;
}
public void setDept(String dept) {
this.dept = dept;
}
public String getCompany() {
return company;
}
public void setCompany(String company) {
this.company = company;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
}
UserAction.java代码：
@ParentPackage("json-default")
@Results({ @Result(name = "getUserAJAXOK", type = "json", params = { "root",
"user", "callbackParameter", "callback" }) })
public class UserAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private int id;
private User user;
@Action(value = "getUserAJAX")
public String getUserAJAX() {
user = new User();
if (id == 1) {
user.setId(1);
user.setName("张三");
user.setDept("财务部");
user.setCompany("百度");
user.setEmail("123456789@qq.com");
user.setPhone("13333333333");
}
return "getUserAJAXOK";
}
// getter & setter
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
}
2. 前台
grxx.html代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$(document).ready(function() {
$("#grxx").on("tap",function(){
$.getJSON("http://localhost:8080/oa/getUserAJAX.action?callback=?",
{"id": "1"},
function(data) {
$("#uname").html(data.name);
$("#dept").html(data.dept);
$("#company").html(data.company);
$("#email").html(data.email);
$("#phone").html(data.phone);
}
);
});
});
</script>
<style type="text/css">
.dark {
color: #CCC;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" data-theme="b">
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext">首页</a>
<h1>个人信息</h1>
</div>
<div data-role="content" data-theme="d">
<ul data-role="listview" data-inset="true">
<li>
<a href="#"><img src="images/head1.png"></a>
</li>
<li data-role="list-divider"></li>
<li><div class="ui-grid-a"><div class="ui-block-a">用户名</div><div class="ui-block-b dark" id="uname"></div></div></li>
<li><div class="ui-grid-a"><div class="ui-block-a">所在部门</div><div class="ui-block-b dark" id="dept"></div></div></li>
<li><div class="ui-grid-a"><div class="ui-block-a">所属公司</div><div class="ui-block-b dark" id="company"></div></div></li>
<li data-role="list-divider"></li>
<li><div class="ui-grid-a"><div class="ui-block-a">邮箱</div><div class="ui-block-b dark" id="email"></div></div></li>
<li data-role="list-divider"></li>
<li><div class="ui-grid-a"><div class="ui-block-a">手机号码</div><div class="ui-block-b dark" id="phone"></div></div></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="c">
<div data-role="navbar">
<ul>
<li><a id="gg" href="gg.html"><img src="images/gg.png" /><br />公告</a></li>
<li><a id="sp" href="sp.html"><img src="images/sp.png" /><br />审批</a></li>
<li><a id="qd" href="qd.html"><img src="images/qd.png" /><br />签到</a></li>
<li><a id="hys" href="hys.html"><img src="images/hys.png" /><br />会议室</a></li>
<li><a id="grxx" href="grxx.html" class="ui-btn-active ui-state-persist"><img src="images/grxx.png" /><br />个人信息</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【推荐】捕获WCF服务端与客户端产生的通讯数据并分析
- 王家林最受欢迎的一站式云计算大数据和移动互联网解决方案课程 V1（20140809）之HTML5端云整合：智能端应用与云端服务整合开发实战
- 移动应用实战（移动OA）之五_会议室管理之二
- 【推荐】捕获WCF服务端与客户端产生的通讯数据并分析
- SilverLight企业应用框架设计【五】客户端调用服务端（使用JSON传递数据，自己实现RESTful Web服务）
- 移动应用实战（移动OA）之七_生成Android手机APP之二
- Socket客户端和服务端通讯 要求客户端发送数据后回显同样数据
- 移动应用实战（移动OA）之四_会议室管理之一
- http接口加密《一》：移动应用中，通过在客户端对访问的url进行加密处理来保护服务器上的数据
- 用.Net打造一个移动客户端（Android/IOS）的服务端框架NHM（二）——“请求”“交互”与传输数据（服务器端）
- 医调项目之C# 服务端与客户端JS通讯数据加密
- 移动应用实战（移动OA）之一_简介
- 移动应用实战（移动OA）之二_jQuery Mobile简介
- 移动应用实战（移动OA）之六_生成Android手机APP之一
- 接口加密《一》：移动应用中，通过在客户端对访问的url进行加密处理来保护服务器上的数据
- webservice实际应用之调用外部系统提供的服务端地址，写java的webservice客户端程序并通过接口给外部系统传数据
- 王家林最受欢迎的一站式云计算大数据和移动互联网解决方案课程 V1（20140809）之HTML5端云整合：智能端应用与云端服务整合开发实战
- 捕获WCF服务端与客户端产生的通讯数据并分析
- Socket的通讯收发文件数据（含服务端和客户端）
- 【推荐】捕获WCF服务端与客户端产生的通讯数据并分析