原生网络请求 -九游会国际

webapp快捷打包
原生网络请求

敬告:此 demo 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,九游会国际-九游会真人第一品牌

js-sdk 引用方式:

♦ 普通网页 script 方式加载:下载最新版 ,请在页面上调用 jsbridge 接口之前引用 jsbridge-mini.js 库;

♦ js module 方式引用:npm install ym-jsbridge

net 发起网络请求

服务器端需使用 utf-8 编码,否则可能会出现中文乱码问题。

var result = $("#result").text("请求中...");
$('html,body').animate({scrolltop: $('#view').offset().top}, 1200);
//发起网络请求
jsbridge.net({
  //必须,网络请求地址
  url   : 'http://www.zhidianwl.com/doc/echo.cshtml',
  //可选,支持get/post/put/delete 默认get
  method: 'get',
  //可选,json 格式的请求参数
  params: {
    name: "webapp快捷打包"
  },
  //可选,json 格式的自定义请求头 request header
  headers: {
    "key1": "value1",
    "key2": "value2"
  },
  //可选,是否显示加载动画,默认 false
  indicator: true,
  //可选,预期的服务器响应的数据类型,默认 text
  //可能的值
  //  text   文本字符,回调参数 text 将原样返回服务器响应结果
  //  stream 二进制流,回调参数 text 将返回服务器响应二进制流的 base64 编码
  //注意,由于移动设备处理能力有限,单次请求服务器端不宜返回太多数据
  datatype : "text"
}, function(succ, text) {
  if (succ) {
    //服务器返回的原始字符串
    //需要自己做解析,如 json/xml 等
    result.text(text);
  } else {
    result.text("网络请求错误");
  }
});

http.net 发起网络请求

与 jquery 的 $.get 用法类似

var result = $("#result").text("请求中...");
$('html,body').animate({scrolltop: $('#view').offset().top}, 1200);    
//发起网络请求
jsbridge.http.get('http://www.zhidianwl.com/doc/echo2.cshtml', {
  name: "webapp快捷打包"
}, function(r){
  //服务器需返回json格式
  result.jsonview(r);
});

http.get 发起网络请求

与 jquery 的 $.get 用法类似

var result = $("#result").text("请求中...");
$('html,body').animate({scrolltop: $('#view').offset().top}, 1200);    
//发起网络请求,注意 url utf8 编码
//https://suggest.taobao.com/sug?code=utf-8&q=手机
jsbridge.http.get('https://suggest.taobao.com/sug?code=utf-8&q=手机', function(r){    
  //服务器需返回json格式
  result.jsonview(r);
});

http.post 发起网络请求

与 jquery 的 $.post 用法类似

var result = $("#result").text("请求中...");
$('html,body').animate({scrolltop: $('#view').offset().top}, 1200);    
//发起网络请求
jsbridge.http.post('http://www.zhidianwl.com/doc/echo2.cshtml', {
  name: "webapp快捷打包 by post"
}, function(r){    
  //服务器需返回json格式
  result.jsonview(r);
});

net 服务器返回二进制流

var result = $("#result").text("请求中...");
$('html,body').animate({scrolltop: $('#view').offset().top}, 1200);
//发起网络请求
jsbridge.net({
  url   : 'https://i.yimenyun.net/sys/s12.png',
  method: 'get',
  datatype: "stream"
}, function(succ, text) {
  if (succ) {
    //text 参数为服务器响应数据的 base64 编码
    result.text(text);
  } else {
    result.text("网络请求错误: "   text);
  }
});

netuploadfile 上传文件

选择本地文件,以 multipart/form-data 编码方式提交(post或put)到指定的 url

var result = $("#result").text("请求中...");
$('html,body').animate({scrolltop: $('#view').offset().top}, 1200);    
//发起网络请求
jsbridge.netuploadfile({
  //必须,接收文件的服务器地址
  url   : 'http://www.zhidianwl.com/doc/echo2.cshtml',
  //可选,菜单项,默认 选择文件
  //如果仅有一项则不会出现选择菜单,直接进入对应操作
  //1 - 选择文件
  //2 - 相机拍照
  //4 - 录制音频
  //8 - 录制视频
  menuitems: 1   2   4   8,
  //可选,支持post/put 默认post
  method: 'post',
  //可选,json 格式的请求参数
  params: {
    name: "webapp快捷打包"
  },
  //可选,json 格式的自定义请求头 request header
  headers: {
    "key1": "value1",
    "key2": "value2"
  },
  //可选,form 表单的 file 字段名称,默认 file
  name   : "file",
  //可选,是否显示加载动画,默认 true
  indicator: true,
  //可选,进度回调
  onprogress: function(count, total){
    result.text("总共:"   total   ",已完成:"   count);
  },
  //可选,成功回调
  onsuccess : function(text){
    var j = json.parse(text);
    result.jsonview(j);
  },
  //可选,失败回调
  onfail    : function(error){
    result.text("失败:"   error);
  }
});

netuploadfile 上传文件

选择本地文件,以 multipart/form-data 编码方式提交(post或put)到指定的 url

var result = $("#result").text("请求中...");
$('html,body').animate({scrolltop: $('#view').offset().top}, 1200);    
//发起网络请求
jsbridge.netuploadfile({
  url      : 'http://www.zhidianwl.com/doc/echo2.cshtml',
  menuitems: 1   2,
  indicator: true,
  onsuccess: function(text){
    var j = json.parse(text);
    result.jsonview(j);
  },
  onfail   : function(error){
    result.text("失败:"   error);
  }
});

网络返回结果:

网站地图