使用Rexsee、Jquery、PHP开发移动应用中的数据交互问题
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