在Html5中与服务器交互

简介:

转自原文 在Html5中与服务器交互

 

刚刚涉足职场,上头就要我研究HTML5,内嵌到手机上,这对我来说完全是一个陌生的领域,不过也正好给自己一个机会来学习,最近做到要跟服务器交互这部分,这部分可是卡了很久,不过最终还是解决了。下面介绍两种方法:

  • ajax
  • Cordova Http

首先要说明一点,如果是在PC端上进行交互的话,这就是跨域问题,需要服务器那边进行一些修改,否则的话是不能访问的。我一开始也是在PC端上测试的,所以这个问题一直卡了很久,原来只要内嵌到手机上就不存在跨域问题了,真蛋疼~,所以我介绍的两张方法都是基于内嵌到手机上的,要注意了!

ajax及使用

如果是用原生态的ajax写访问的话,就比较麻烦,所以这次我用的是jQuery封装好的ajax,先上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.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 Http

这种方法是要基于你的项目是cordova项目。这里稍微说两句,cordova前身是phoneGap,其实两者是一样的,都是移动web的开发框架,有兴趣的可以去了解一下!由于这篇文章(Cordova环境安装配置 )主要是讲如何使用这个插件,环境搭建的就不说了。

  • 安装插件 
    在命令行里面进入到自己的项目里面: 
    这里写图片描述 
    点击回车,等待一会就可以了,再打开自己的项目的plugins,就可以看到cordova-plugin-http这个文件,证明插件安装成功了! 
    这里写图片描述

  • 使用

复制代码
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].

其实这个难度也不是很大的,只要看一下就知道怎样用了,希望对大家和对自己也有用!

 

没有整理与归纳的知识,一文不值!高度概括与梳理的知识,才是自己真正的知识与技能。 永远不要让自己的自由、好奇、充满创造力的想法被现实的框架所束缚,让创造力自由成长吧! 多花时间,关心他(她)人,正如别人所关心你的。理想的腾飞与实现,没有别人的支持与帮助,是万万不能的。








    本文转自wenglabs博客园博客,原文链接:http://www.cnblogs.com/arxive/p/7168439.html ,如需转载请自行联系原作者







相关文章
|
移动开发 HTML5 容器
基于 HTML5 WebGL 的 3D 服务器与客户端的通信
这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子。3D 机房方面的模拟一般都是需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算是我对这次项目的一个总结吧。
1379 0
|
4天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
24 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
27天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
113 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
25天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
52 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
24天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
63 34
|
28天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
76 33
|
26天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
32 2
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24
|
3月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
113 7

热门文章

最新文章