关于利用Phongap+jQueryMobile来进行移动web应用开发心得

   在平时写代码的过程中，经常遇到问题，这时大牛们的博客记录变成了我解决问题的常用途径。博客记录不仅可以帮助我们整理我们的思绪，也可以将自己遇到的问题罗列出来，在别人遇到相同问题时给别人一些前车之鉴。这是我的第一篇微博，也将在以后的时间陆续跟新，记录我学习phogap的学习之旅。好了废话不多说，先说说我在第一次开发中遇到的问题。第一次接触phonegap前端谢了个登录界面，但是不知道怎么连到服务器验证用户，后来经过查找，发现了jQuery的$.post方法，这方法对于同服务器的数据交互确实好用，好先来前台客户端代码：

 <div data-role="page" id="page-login" style="background:url(img/pattern4.png);">
        <div data-role="none" style=" position:absolute; width:100%; top:10%; text-align:center; ">
            <h2>工程监管系统</h2>
        </div>
        <div data-role="none" id="content-login" style=" position:absolute; width:100%; top:35%;">
                <div style=" padding:0 10% 0 10%; text-align:center;">
                    <input name="username" id="username" value="admin" placeholder="用户名" data-theme="a" type="text" style=" padding-bottom:0;">
                    <input name="password" id="password" value="123456" placeholder="密码" data-theme="a" type="password" style=" padding-top:0;">
                    <button onClick="login()" class="ui-btn ui-corner-all ui-shadow ui-btn-b">登录</button>
                    <!--<a href="#page-home" onClick="login()" data-role="button" data-theme="b">登录</a>-->
                </div>
            <div style="width:100%; margin-top:40%; text-align:center; ">
                <span>通信技术有限公司</span>
                <p style="margin-top:5px;">Copyright &copy;2010-2014</p>
            </div>
        </div><!-- /none -->  
    </div> <!--/page-login -->

这是html页面代码，其中的js代码如下

<script>
		function login(){
			var login_url = "http://113.251.222.67/Supervision/index.php/mobile_app/login";
			//var networkState = navigator.connection.type;
						
			//if(networkState == Connection.NONE)
			if(0 == 1) // debug
			{
				alert("无网络连接，请检查网络！");
			}
			else
			{
				// 注意，该请求方式在google、firefox浏览器中存在跨域错误
				$.post(login_url,
					{
						username:$("#username").val(),
						password:$("#password").val()
					},
					function(jdata,status){
						//alert(jdata);
						var data = eval ("(" + jdata + ")");
						if (data.login == "successful")
						{
							//window.location.href = "#page-home";
							//alert("成功登陆");
							$(':mobile-pagecontainer').pagecontainer('change', '#page-home', {
								//transition: 'pop',
								changeHash: false,
								reverse: true,
								showLoadMsg: true
							});
							
							$("#undo-task-cnt").empty().append(data.undo_task_cnt);
							$("#done-task-cnt").empty().append(data.done_task_cnt);
							$("#task-bubble").empty().append(data.undo_task_cnt);
							if(data.undo_task_cnt == 0)
							{
								$("#task-bubble").hide();
							}
							else
							{
								$("#task-bubble").show();
							}

						}
						else
						{
							alert("账号不存在，或密码错误!data="+data);
						}
					}
				);
			}
		}

其中的$.post();方法便是我们与服务器交互的方法，我们先看看官方手册吧：http://www.w3school.com.cn/jquery/ajax_post.asp

<span style="white-space:pre">	</span><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: 'Courier New', Courier, monospace; width: 685px; background-color: rgb(245, 245, 245); ">jQuery.post(<span style="margin: 0px; padding: 0px; border: 0px; ">url</span>,<span style="margin: 0px; padding: 0px; border: 0px; ">data</span>,<span style="margin: 0px; padding: 0px; border: 0px; ">success(data, textStatus, jqXHR)</span>,<span style="margin: 0px; padding: 0px; border: 0px; ">dataType</span>)

 
 
url
必需。规定把请求发送到哪个
 URL。
data
可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data,
 textStatus, jqXHR)
可选。请求成功时执行的回调函数。
dataType
可选。规定预期的服务器响应的数据类型。
默认执行智能判断（xml、json、script
 或 html）。

其实.post方法时jQuery-ajax方法它是ajax函数的简写，等价于

$.ajax(

{

  type:'post';

  url:url;

  data:data;

   success:success,

   dataType:dataType

}

)

其上的url是unit resource location 公共资源定位，也就是你想要请求的处理页面，可以是一个站点下面的处理页面如a.php也可以是公网服务器上的文件，比如我上面的就是"http://113.251.222.67/supervision/login.php"这也是可以的。第一个数据data数据是连同请求发过去的数据，我上面的json数据格式，success是请求成功后的回调函数，可以有返回参数，dataType返回的数据类型。

客户端讲完了我们再来看看服务器端的login.php是怎么接收的代码如下：<span>	</span>

<span><?php
$</span>username<span> = $_POST["</span>username<span>"];
$</span>password<span> = $_POST["</span>password<span>"];
echo $</span>username<span>;
echo $</span>password<span>;
echo "success";
?>																			</span>zh这样我们便能够取到数据并处理了！

第一次写博客写得太丑了，望大家别见怪，自己以后会慢慢改进，希望能给有需要的人一点帮助！<span>				</span>