使用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&copy; 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;
}
?>

来源：oschina

链接：https://my.oschina.net/u/194999/blog/59035

标签

android

Rexsee

移动Web开发

jquery

webservice

数据交互