Rexsee、Jquery、PHP を使用したモバイル アプリケーション開発におけるデータ相互作用の問題
?
Rexsee コミュニティからの体験投稿です。主にデータ インタラクションの実装を紹介しています。一緒に学びましょう:
?
モバイル販売製品を開発する場合、ユーザーは WebService 呼び出しを介したデータ対話を必要としました。 Rexsee、Jquery-mobile、PHP、WebService などのいくつかの開発ツールを使用してデバイスを呼び出し、写真や位置情報などの機能を完成させます。Juqery-mobile を使用してインターフェイスを開発し、PHP + SOAP を使用してデータベースのデータ対話機能を完成させます。返されたデータをカプセル化してフロントエンドに返すことで、データの非同期対話を実現し、返された結果は統一された標準と強力な使いやすさを備えています。いくつかの例を通してそれを紹介しましょう:
ログインページ:
?
?
<!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 関数が非同期的に呼び出され、WebService 呼び出しが完了し、返されるデータは 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