Rexsee社区的一篇经验贴,转过来,主要是介绍数据交互这一块的实现,共同学习:
在开发某移动销售产品时,用户要求通过WebService调用进行数据交互。使用Rexsee,Jquery-mobile,PHP,WebService几种开发工具可以做到设备调用完成照片、定位等功能,使用Juqery-mobile开发界面,使用PHP+SOAP完成数据库及Webservice的数据交互功能,通过JSON使用PHP将返回数据封装后再返回到前端,这样就做到了数据的异步交互,而且返回结果标准统一,可用性强。下面通过几个例子介绍一下:
登录页面:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>移动销售</title>
<link rel="stylesheet" href="../m_jquery-110/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="../m_jquery-110/demos/docs/_assets/css/jqm-docs.css"/>
<script src="../m_jquery-110/demos/js/jquery.js"></script>
<script src="../m_jquery-110/demos/docs/_assets/js/jqm-docs.js"></script>
<script src="../m_jquery-110/jquery.mobile-1.1.0.js"></script>
<script src="../m_jquery/demos/jquery.json-2.3.js"></script>
<STYLE type=text/css>
.dotline {
BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted; color:#FFCCFF
}
</STYLE>
<script type="text/javascript">
function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]);
return false;
}
function SetCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
return false;
}
function onError(data, status)
{
alert("获取数据失败");
rexseeApplication.quit();
return false;
}
function onSuccess(data, status)
{
if (status="sucess")
//alert("刷新数据成功!");
mk_data(data,status);
return false;
}
function mk_data(data,status)
{
data = $.trim(data);
//alert(data);
var m_sel = $.evalJSON(data).Shop.oper;
//alert(m_sel);
if (m_sel=="getshop")
{
if (data=="{}")
{
alert("登录失败,系统将退出!");
rexseeApplication.quit();
}
else
{
var data1 = $.evalJSON(data).Shop.shopno;
var data2 = $.evalJSON(data).Shop.shopname;
//alert(data1);
var data3 = $("#uname").val();
var data4 = $("#upwd").val();
var m_txt="欢迎您"+ data3 + "\n 部门:" + data1 + data2;
alert(m_txt);
if (data1!="")
{
SetCookie("uname", data3);
SetCookie("ushopno", data1);
SetCookie("ushopname", data2);
SetCookie("upwd", data4);
//window.open ('main.php');
window.location="main.php";
}
}
}
return false;
}
function init()
{
var m_v1=$("#uname").val();
var m_v2=$("#upwd").val();
if (m_v1=="")
{
alert("请输入号码!");
return false;
}
if (m_v2=="")
{
alert("请输入密码!");
return false;
}
$("#oper").val('getshop');
var formData = $("#loginForm").serialize();
$.ajax({
type: "POST",
url: "func_soap.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
}
$(document).ready(function() {
rexseeScreen.setScreenOrientation('portrait');
rexseeStatusBar.setStyle('visibility:hidden;');
var m_s1=rexseeTelephony.getDeviceId();
var m_s2=getCookie('uname');
var m_s3=getCookie('upwd');
$("#uname").val(m_s2);
$("#upwd").val(m_s3);
$("#mylogin").click(function(){
//alert("fdjsaf");
init();
})
return false;
});
</script>
</head>
<body>
<form name="loginForm" id="loginForm" method="POST" target="_self" action="javascript:void(0);" >
<input type="hidden" name="oper" id="oper" size="36" value="" readonly>
<div data-role="page" class="type-interior" id="album-list">
<div data-role="header" class="footer-docs" data-theme="b">
<h1><img src="images/logo4.png" /></h1>
</div> <!-- /header -->
<div data-role="content">
<div class="content-primary">
<p></p>
<div class="ui-body ui-body-c">
<div class='ui-grid-a' id=saleinfo>
<div class='ui-block-a' style='width:180px'><label for='dd_sid'>手机号码</label></div><div class='ui-block-b'></div>
<div class='ui-block-a' style='width:180px'><input type='text' name='uname' id='uname' value='18658269081' /></div><div class='ui-block-b'></div>
<div class='ui-block-a' style='width:180px'><label for='dd_sid'>登录密码</label></div><div class='ui-block-b'></div>
<div class='ui-block-a' style='width:180px'><input type='password' name='upwd' id='upwd' value='' /></div><div class='ui-block-b'></div>
<p></p>
<p></p>
</div>
</div>
<a id="mylogin" href="javascript:void(0);" data-role="button" data-theme="e" data-icon="check">登录系统</a>
<p><img border="0" src="images/back.png" ></p>
<p></p>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="b" data-position="fixed">
<p>CopyRight© Chinaunicom Jinan 2012 All Right Reserved. </p>
</div>
</div><!-- /page -->
</form>
</body>
</html>
以上页面通过Jquery-mobile显示一个登录页面,点击提交后异步调用func_sap函数完成WebSerivce调用及返回,返回数据以JSON形式,通过javascript的json函数将数据提取并处理。
func_soap.php文件
<?php
function getshop($phone)
{
$wsdl = "http://.../Service.asmx?wsdl";
$soap_client = new SoapClient($wsdl);
$param=array( 'phone'=> $phone);
$objectresult = $soap_client->AgetShop($param);
$simpleresult = $objectresult->AgetShopResult;
$obj = simplexml_load_string($simpleresult);
$obj->Shop[0]->addChild("oper", "getshop");
$json = json_encode($obj);
$array = json_decode($json,TRUE);
$_SESSION['shopno']= $array["Shop"]['shopno'];
$_SESSION['phone']=$phone;
return $json;
}
//调用函数
header("Content-Type:text/html;charset=utf-8");
$moper=$_POST['oper'];
if ($moper=="getshop")
{
$mresult=getshop($muname);
echo $mresult;
}
?>
原文链接:http://www.rexsee.com/CN/bbs/thread/2012-04-29/556.html
分享到:
相关推荐
了解使用Rexsee EMS开发Android手机应用的好资料
Rexsee是基于Android的HTML5开发平台,帮助开发者使用HTML5+JavaScript开发Android应用。 Rexsee的特点 编程语言使用 HTML5+CSS3+JavaScript+Rexsee扩展API。 超过2000个JavaScript扩展API,功能强大。 支持第三方...
rexsee手机本地版开发手册
Rexsee是基于Android的HTML5开发平台,帮助开发者使用HTML5+JavaScript开发Android应用。
Android移动中间件Rexsee开发手册,利用它可以快速开发Android应用程序,只需要你掌握HTML+CSS+JavaScript,而需要掌握java和Android SDK。让你快速得进入到移动开发的大门。
Rexsee是基于Android的HTML5开发平台,帮助开发者使用HTML5+JavaScript开发Android应用。 Rexsee的特点 编程语言使用 HTML5+CSS3+JavaScript+Rexsee扩展API。 超过2000个JavaScript扩展API,功能强大。 支持第三方...
Rexsee是基于Android的HTML5开发平台,帮助开发者使用HTML5+JavaScript开发Android应用
Rexsee是基于Android的HTML5开发平台,帮助开发者使用HTML5+JavaScript开发Android应用。 Rexsee的特点 编程语言使用 HTML5+CSS3+JavaScript+Rexsee扩展API。 超过2000个JavaScript扩展API,功能强大。 支持第三方...
Rexsee源代码,Rexsee系统的源代码。从他的网站上一点一点搞下来的。哈哈。。你懂的。
Web应用,Rexsee,开源,Web开发,JS,Android,Web技术,应用趋势,应用范围,移动终端,,开源Rexsee模糊原生应用与W,开源Rexsee模糊原生应用与Web应用界线
rexsee目前取消了在线生成功能,只提供了简单的安装指引,但这个指引对于安卓菜鸟来说过于简单,而且其中有几处重大缺漏。本人对官方文档进行了补充说明,并介绍了自己遇到的经验教训,希望对擅长webapp开发,而又不...
NULL 博文链接:https://key232323.iteye.com/blog/1779445
Hybrid App 开发模式正在被越来越多的公司和开发者所认同,相信将来会成为主流的移动应用开发模式。 Hybrid App 融合 Web App 的原理就是嵌入一个WebView组件,可以在这个组件中载入页面,相当于内嵌的浏览器,代码...
摘要:PHP源码,管理系统,ESM,销售管理系统 ESM企业... 中间件层包括函数库rexsee,由java开发,android操作系统、中间件、用户界面和应用软件组成。 服务器端新增功能模块: 1.客户拜访 2.公告文档 3.产品管理 4