刚刚涉足职场,上头就要我研究html5,内嵌到手机上,这对我来说完全是一个陌生的领域,不过也正好给自己一个机会来学习,最近做到要跟服务器交互这部分,这部分可是卡了很久,不过最终还是解决了。下面介绍两种方法:
首先要说明一点,如果是在PC端上进行交互的话,这就是跨域问题,需要服务器那边进行一些修改,否则的话是不能访问的。我一开始也是在PC端上测试的,所以这个问题一直卡了很久,原来只要内嵌到手机上就不存在跨域问题了,真蛋疼~,所以我介绍的两张方法都是基于内嵌到手机上的,要注意了!
如果是用原生态的ajax写访问的话,就比较麻烦,所以这次我用的是jquery封装好的ajax,先上代码:
$.ajax({
type:"GET",
url:"***",
dataType:"json",
data:{
appId:"",
passportCode:"*******",
clientTye:"android",
},
success:function(data){
alert("访问成功" + JSON.stringify(data));
},
error:function(jqXHR){
alert("发生错误" + jqXHR.status);
}
});
这里面有好几个字段,这几个字段的意思是:
字段 | 描述 |
---|---|
type | 指明是get操作还是post操作 |
url | 要访问的地址,就是服务器提供的接口 |
dataType | 服务器预期返回的数据格式,如(xml,json,html) |
data | 参数 |
success | 访问成功时的回调函数 |
error | 访问失败时的回调函数 |
补充说一下:success:function(data,textStatus,jqXHR)这三个参数是可选的,我习惯就只带一个参数,就是data。这个返回的data已经是json对象来的,可以直接解析的。假如返回的是
{
result:0,
description : ””,
hasNewVersion : ””,
verson: “”,
url:““,
clientType:““ ,
updateDesc:““ ,
updateTime:““ ,
mustUpdate:””
},
那么data.result就是0了,是不是觉得很方便呢。效果图:
这种方法是要基于你的项目是cordova项目。这里稍微说两句,cordova前身是phoneGap,其实两者是一样的,都是移动web的开发框架,有兴趣的可以去了解一下!由于这篇文章主要是讲如何使用这个插件,环境搭建的就不说了。
cordovaHTTP.post("url地址", {
appId:"",
phone:"",
password:"",
clientTye:"web", //参数
}, {//这个我基本一直都是空的},
function(response) { //成功回调的函数
// prints 200
alert(response.status + "访问成功" + "\n返回的json数据 为:" + response.data);
try {
//转化为json对象
var jsonbj = JSON.parse(response.data);
} catch(e) {
console.error("JSON parsing error");
}
}, function(response) { //失败回调的函数
// prints 403
alert("访问失败" + response.status + "、" + response.data);
//prints Permission denied
console.log(response.error);
});
这个也没什么好说的,看完之后也明白的了。
具体请参考[https://github.com/wymsee/cordova-HTTP][2].
其实这个难度也不是很大的,只要看一下就知道怎样用了,希望对大家和对自己也有用!