在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月前
|
搜索推荐 API SEO
Angular 服务器端渲染的静态 HTML 变为客户端的动态应用的过程
Angular 服务器端渲染的静态 HTML 变为客户端的动态应用的过程
63 1
|
5月前
|
JavaScript UED
Angular 服务器端渲染场景里,服务器端和客户端渲染出的 HTML 源代码有可能不完全一致
Angular 服务器端渲染场景里,服务器端和客户端渲染出的 HTML 源代码有可能不完全一致
57 0
|
9月前
|
存储 缓存 JavaScript
Qt+QtWebApp开发笔记(六):http服务器html实现静态相对路径调用第三方js文件
为了解决调用一些依赖的如echarts等一些js的代码模块引入的问题,就需要静态文件了。 本篇解说StaticFileController,在返回的html文本中调用外部js文件,类似的,其他文件都是一样了,只是引入的后缀名不一样。
Qt+QtWebApp开发笔记(六):http服务器html实现静态相对路径调用第三方js文件
|
9月前
|
XML JSON 前端开发
Qt+QtWebApp开发笔记(五):http服务器html中使用json触发ajax与后台交互实现数据更新传递
前面完成了页面的跳转、登录,很多时候不刷新页面就想刷新局部数据,此时ajax就是此种技术,且是异步的。   本篇实现网页内部使用js调用ajax实现异步交互数据。   在js中使用 ajax是通过XMLHttpRequest来实现的。
|
数据采集 Python
运用阿里云服务器实现Python自动发送HTMl邮件
参加阿里云——飞天加速计划,学会部署服务器并且以Python爬虫为基础,爬取天气网每日天气,并且运用Python yagmail模块以及阿里云服务器实现每日自动发送天气预报
运用阿里云服务器实现Python自动发送HTMl邮件
|
JavaScript SEO
调试 SAP Spartacus 服务器端渲染 SEO HTML Tag 生成逻辑的注意事项
调试 SAP Spartacus 服务器端渲染 SEO HTML Tag 生成逻辑的注意事项
75 0
调试 SAP Spartacus 服务器端渲染 SEO HTML Tag 生成逻辑的注意事项
部署到ABAP服务器上的SAP UI5应用,其index.html的读取逻辑
How is correct index.html served by ui5 handler from BSP repository
部署到ABAP服务器上的SAP UI5应用,其index.html的读取逻辑
|
移动开发 HTML5 容器
基于 HTML5 WebGL 的 3D 服务器与客户端的通信
这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子。3D 机房方面的模拟一般都是需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算是我对这次项目的一个总结吧。
1321 0

相关产品

  • 云迁移中心