博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在Html5中与服务器交互
阅读量:5173 次
发布时间:2019-06-13

本文共 2158 字,大约阅读时间需要 7 分钟。

转自原文

 

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

  • ajax
  • Cordova Http

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

ajax及使用

如果是用原生态的ajax写访问的话,就比较麻烦,所以这次我用的是封装好的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的开发框架,有兴趣的可以去了解一下!由于这篇文章()主要是讲如何使用这个插件,环境搭建的就不说了。

  • 安装插件

    在命令行里面进入到自己的项目里面:
    这里写图片描述
    点击回车,等待一会就可以了,再打开自己的项目的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://www.cnblogs.com/arxive/p/7168439.html

你可能感兴趣的文章
常见的文件包含漏洞
查看>>
mysql(一主从从)
查看>>
vue事件.navtive 的使用
查看>>
符号“&”和const在函数里不同位置的用法
查看>>
在vue的项目中引入swiper插件
查看>>
【转】勤奋小孩的遗言:没有理由不坚持。
查看>>
篮球30秒可控计时器
查看>>
centos6.9安装虚拟机kvm
查看>>
使用Aspose.Cells 根据模板生成excel里面的 line chart
查看>>
PowerMock简单使用
查看>>
Env:ctags和Taglist安装与配置
查看>>
父组件直接触发子组件中的函数
查看>>
微信公众号开发笔记2
查看>>
mysql中find_in_set()函数的使用(转载)
查看>>
设计模式-命令模式(Command)
查看>>
vb.net 正則表達式 取 固定格式的字符
查看>>
HDU 2444 The Accomodation of Students (二分图最大匹配+二分图染色)
查看>>
FreeSwitch三方通话
查看>>
clearcanvas解析
查看>>
进程,线程,协程的区别与联系
查看>>