在Html5中与服务器交互
转自原文 在Html5中与服务器交互
刚刚涉足职场,上头就要我研究HTML5,内嵌到手机上,这对我来说完全是一个陌生的领域,不过也正好给自己一个机会来学习,最近做到要跟服务器交互这部分,这部分可是卡了很久,不过最终还是解决了。下面介绍两种方法:
- ajax
- Cordova Http
首先要说明一点,如果是在PC端上进行交互的话,这就是跨域问题,需要服务器那边进行一些修改,否则的话是不能访问的。我一开始也是在PC端上测试的,所以这个问题一直卡了很久,原来只要内嵌到手机上就不存在跨域问题了,真蛋疼~,所以我介绍的两张方法都是基于内嵌到手机上的,要注意了!
ajax及使用
如果是用原生态的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 Http
这种方法是要基于你的项目是cordova项目。这里稍微说两句,cordova前身是phoneGap,其实两者是一样的,都是移动web的开发框架,有兴趣的可以去了解一下!由于这篇文章(Cordova环境安装配置 )主要是讲如何使用这个插件,环境搭建的就不说了。
安装插件
在命令行里面进入到自己的项目里面:
点击回车,等待一会就可以了,再打开自己的项目的plugins,就可以看到cordova-plugin-http这个文件,证明插件安装成功了!
使用
cordovaHTTP.post("url地址", {appId:"",phone:"",password:"",clientTye:"web", //参数}, {//这个我基本一直都是空的}, function(response) { //成功回调的函数// prints 200alert(response.status + "访问成功" + "\n返回的json数据 为:" + response.data);try {//转化为json对象var jsonbj = JSON.parse(response.data);} catch(e) {console.error("JSON parsing error");}}, function(response) { //失败回调的函数// prints 403alert("访问失败" + response.status + "、" + response.data);//prints Permission denied console.log(response.error);});
这个也没什么好说的,看完之后也明白的了。
具体请参考[https://github.com/wymsee/cordova-HTTP][2].
其实这个难度也不是很大的,只要看一下就知道怎样用了,希望对大家和对自己也有用!
转载于:https://www.cnblogs.com/arxive/p/7168439.html
在Html5中与服务器交互相关推荐
- HTML5中的服务器发送事件Server-sent events
HTML5加了许多新功能,其中服务器发送事件Server-sent events是一个亮点,以下直接贴上代码示例 客户端a.html页面 <!DOCTYPE html> <html& ...
- android 请求服务器抛io异常,Android开发中与服务器交互时,遇到java.io.IOException: Target host must not be null的问题...
当我遇到这个问题的时候,也在网上查找好半天.找到了一个和这个问题很类似的问题--java.lang.IllegalStateException: Target host must not be nul ...
- html5中的css特性,浅谈HTML5 CSS3的新交互特性
本文标题的这副图片,是用phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...
- php版canvas,PHP实现将HTML5中Canvas图像保存到服务器
这篇文章主要介绍了PHP实现将HTML5中Canvas图像保存到服务器的方法,可实现将Canvas图像保存到服务器的功能,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了PHP实现将HTML5中 ...
- 服务器购买网站vuter,vscode中安装开发html5中需要的插件
vscode中安装开发html5中需要的插件 vscode中安装开发html5中需要的插件 最近在学习H5,也开始尝试着用vscode来写h5的代码.vscode是一个很不错的剪辑器,已经用它来写过p ...
- html5中单选框被选中把值传给后台_HTML5的表单设计
使用过Delphi的程序员,对Form这个词应该比较熟悉.在Delphi中,Form被翻译为"界面.窗口",作用是:为用户提供界面,供用户输入信息,向用户展示处理结果. HTML5 ...
- HTML5中id、name、class 区别
转载地址:http://www.2cto.com/kf/201210/161751.html 网上找不到专门针对html5的,只能找到以前HTML的.看了一下,它们差不多,尤其是本文后面专门讲的区别讲 ...
- java2048设计说明,Html5中的本地存储设计理念
Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样.最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤.此外,在IE6及 ...
- HTML5中Head内标签详解(一):meta标签
引言: 我发现自己最近有点走偏了,越来越多的将学习的精力放在编程上,而渐渐的忽略了HTML这个简单又不简单的标记语言上.相信大家应该也有这样的经历.觉得HTML这种东西很简单不需要花费太多精力就能使用 ...
- kazoo源码分析:服务器交互的实现细节
kazoo源码分析 kazoo-2.6.1 kazoo客户端与服务器概述 上文start概述中,只是简单的概述了kazoo客户端初始化之后,调用了start方法,本文继续详细的了解相关的细节. kaz ...
最新文章
- Eclipse和MyEclipse自动提示设置
- Vue_VueResource
- Linux 下编译并运行C语言程序
- 探讨后端选型中不同语言及对应的Web框架
- 高斯课堂数电讲义笔记_学技树
- 冻存样品对单细胞测序影响大吗?
- 基础【枚举】-----(枚举)------(转)
- Silverlight控件应用系列索引
- 小雷:我的核心定位和远大志向(上次更新2013年11月9日)
- RedHat系统的Yum安装
- Spring Boot整合Druid的使用以及步骤
- 做了6年的Java,java简历包装项目经验
- 【软件工程】根据数据流图导出程序结构
- sql小技巧之case when
- Python 八大数据类型。
- 世界各国首都经纬度-json
- vue-bilibili学习笔记
- js实现雪花飘落效果
- 读《Oracle 数据库应用与实践》
- 2022超级好用的接口自动化测试框架:基于python+requests+pytest+allure实现
热门文章
- 华为 台积电 高通申请_华为表态愿意合作,台积电送来“神助攻”,高通:我太难了...
- 十一、JAVA接口的定义和使用
- 阿里云ddns解决动态IP问题
- 阶段5 3.微服务项目【学成在线】_day01 搭建环境 CMS服务端开发_14-MongoDb入门-文档...
- C语言讲义——数组和指针
- bzoj 1019: [SHOI2008]汉诺塔
- JVM内存区域(一)
- 统计一句话中每个字母出现的次数
- CheckBox的触发
- 利用vbs读取XML中的某个指定子叶节点 (转)