日期:2014-05-17  浏览次数:20550 次

使用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="c