`
rexsee
  • 浏览: 20682 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 原文链接:http://www.rexsee.com/CN/bbs/thread/2012-04-29/556.html

分享到:
评论

相关推荐

    使用Rexsee EMS开发Android手机应用:为什么及如何开始

    了解使用Rexsee EMS开发Android手机应用的好资料

    Rexsee开发手册的zip文件

    这个开发手册的zip文件包含了开发者在学习和使用Rexsee时所需要的重要资源。 首先,我们来看看压缩包中的文件: 1. `init.css` 和 `help.css`:这两个文件是CSS(Cascading Style Sheets)样式表,用于定义网页的...

    rexsee jar

    Rexsee是基于Android的HTML5开发平台,帮助开发者使用HTML5+JavaScript开发Android应用。 Rexsee的特点 编程语言使用 HTML5+CSS3+JavaScript+Rexsee扩展API。 超过2000个JavaScript扩展API,功能强大。 支持第三方...

    rexsee手机本地版开发手册

    rexsee手机本地版开发手册

    Android移动中间件Rexsee开发手册

    Android移动中间件Rexsee开发手册,利用它可以快速开发Android应用程序,只需要你掌握HTML+CSS+JavaScript,而需要掌握java和Android SDK。让你快速得进入到移动开发的大门。

    rexsee 最新软件源代码

    首先,我们要理解Rexsee的核心理念——利用Web技术进行移动应用开发。HTML5是现代网页开发的标准,它的离线存储、多媒体支持和强大的表单控件等功能使得构建复杂的交互式应用成为可能。JavaScript作为与HTML5紧密...

    Rexsee源代码

    总的来说,Rexsee源代码是一份宝贵的教育资源,对想要深入了解移动应用开发,尤其是Rexsee系统和Android平台的开发者来说,它提供了丰富的学习材料和实践经验。通过深入研究和实践,开发者可以增强自身的编程技能,...

    Rexsee 源代码

    Rexsee是基于Android的HTML5开发平台,帮助开发者使用HTML5+JavaScript开发Android应用。 Rexsee的特点 编程语言使用 HTML5+CSS3+JavaScript+Rexsee扩展API。 超过2000个JavaScript扩展API,功能强大。 支持第三方...

    移动开发简介

    移动应用开发涵盖了多种操作系统,如Android、iOS、Windows Phone等,由于平台间的差异,跨平台开发成为一大挑战。 2. 手机应用市场 目前,手机应用市场正处于快速发展阶段,各种创新应用层出不穷,从社交网络、...

    rexsee非官方菜鸟安装文档

    1. **基于Android的HTML5开发平台**:Rexsee使开发者能够使用Web技术进行原生Android应用开发。 2. **HTML5+CSS3+JavaScript+Rexsee扩展API**:提供了超过2000个JavaScript扩展API,使得开发者可以调用手机的多种...

    rexsee文档和api使用groovy爬下来分享给大家

    5. 示例项目:演示如何在实际应用中使用 RexSee 的案例。 综合以上信息,这个分享涵盖了 RexSee 工具的使用、Groovy 爬虫技术的应用,以及可能的源码学习。对于想了解或使用 RexSee,以及希望通过 Groovy 进行数据...

    开源Rexsee模糊原生应用与Web应用界线

    在IT行业中,尤其是在移动应用开发领域,原生应用与Web应用的界限正在逐渐模糊,这主要得益于技术的进步和开源解决方案的出现。开源Rexsee正是这样一款致力于打破这两种应用类型界限的工具,它允许开发者利用Web技术...

    rexsee -src.zip

    Rexsee是基于Android的HTML5开发平台,帮助开发者使用HTML5+JavaScript开发Android应用。 Rexsee的特点 编程语言使用 HTML5+CSS3+JavaScript+Rexsee扩展API。 超过2000个JavaScript扩展API,功能强大。 支持第三方...

    基于HTML5 JavaScript的移动用户环境自适应.pdf

    中间件技术可以解决移动用户环境自适应问题,包括使用Rexsee中间件来解决移动用户环境自适应问题。 9. 改进思路 本文还讨论了改进思路,包括如何利用基于HTML5 JavaScript的技术手段和解决方法来解决移动用户环境...

    基于Android系统的移动学习平台的设计与实现.pdf

    学校自行开发的移动学习平台,多数是任课教师自行设计,在中间件(如Rexsee)的架构下,使用HTML5+CSS3+JavaScript的形式进行开发并实现。 4. 云推送技术的应用:本文设计和实现的移动学习平台应用了百度公司提供的...

    Android系统下计算机英语课件的设计与开发.pdf

    在移动学习课件的开发方式上,文章介绍了三种常见方法:HTML5和CSS5的Web APP开发、基于SDK的原生应用开发以及混合开发。HTML5开发语言简洁且兼容性强,但对非专业人士而言,技术门槛较高。SDK开发方式适合专业人员...

    基于Android平台的手机通讯录管理系统.pdf

    随着3G和4G网络的发展,移动终端不仅是通信工具,也是互联网入口,这促使了移动应用软件的巨大需求。Android操作系统因其开放性、创新性和低成本开发优势,成为了手机市场的热门选择。 Android系统是一个全面的移动...

    android动画学习笔记及源码定义.pdf

    此外,Rexsee项目中心提供了一个在线开发平台,开发者无需自备服务器即可进行开发。这个平台还分享了大量的应用源码,包括与动画相关的实例,方便开发者参考和学习。访问http://www.rexsee.com/project/可以找到这些...

    磁场传感器用法

    在移动设备如智能手机和平板电脑中,磁场传感器被广泛应用于定位服务、导航系统以及各类应用程序中。Android操作系统提供了一套完整的API用于访问设备上的传感器,包括磁场传感器。 #### 二、磁场传感器工作原理 ...

Global site tag (gtag.js) - Google Analytics