在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 ,如需转载请自行联系原作者

相关文章
|
4天前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
|
3月前
|
编解码 JavaScript 前端开发
BOM和DOM:BOM(浏览器对象模型)提供了与浏览器交互的能力,如弹窗、定时器等;DOM(文档对象模型)提供了操作HTML元素的能力,如获取、修改元素内容和属性。
BOM和DOM:BOM(浏览器对象模型)提供了与浏览器交互的能力,如弹窗、定时器等;DOM(文档对象模型)提供了操作HTML元素的能力,如获取、修改元素内容和属性。
31 2
|
3月前
|
存储 JSON JavaScript
详细介绍AngularJS中与HTML DOM交互的各种方法和技术
详细介绍AngularJS中与HTML DOM交互的各种方法和技术
117 0
|
7月前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
带交互功能的HTML5+JS爱心樱花
带交互功能的HTML5+JS爱心樱花
带交互功能的HTML5+JS跳动的爱心
带交互功能的HTML5+JS跳动的爱心
带交互功能的HTML5+JS黑客帝国
带交互功能的HTML5+JS黑客帝国
带交互功能的HTML5+JS烟花特效
带交互功能的HTML5+JS烟花特效
|
9月前
|
XML JSON 前端开发
Qt+QtWebApp开发笔记(五):http服务器html中使用json触发ajax与后台交互实现数据更新传递
前面完成了页面的跳转、登录,很多时候不刷新页面就想刷新局部数据,此时ajax就是此种技术,且是异步的。   本篇实现网页内部使用js调用ajax实现异步交互数据。   在js中使用 ajax是通过XMLHttpRequest来实现的。
|
11月前
|
移动开发 前端开发 JavaScript
第19/90步《前端篇》第3章 编写一个简单的HTML5小游戏:完成交互功能 第10课
今天学习《前端篇》第3章完成交互功能的第10课,控制游戏音效,添加单击音效和背景音乐。
50 0

相关产品

  • 云迁移中心