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