我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

在传统网页中,大家经常会使用jqueryajax功能提交数据。那么,在百度智能小程序里面,也是可以使用非常类似的传统ajax写法的。那么,在本文中,苏南大叔讲述的就是百度智能小程序的ajax功能,以及如何处理跨域的问题。

苏南大叔:百度智能小程序,如何利用ajax提交数据? - smartapp-ajax
百度智能小程序,如何利用ajax提交数据?(图1-1)

本文测试环境:mac/百度开发者工具@2.4.2。当然,在智能小程序之中,本文中讲述的技术手段,并不叫做ajax,而是叫做request

基本套路

这个request功能非常的简单,各种不同方法之间就一个method参数不一样,其他的代码基本一致。所以,大家就看下面一个套路代码即可。

swan.request({
    url: 'https://smartprogram.baidu.com/xxx', // 仅为示例,并非真实的接口地址
    method: '<method>',
    dataType: 'json',
    data: {
        key: 'value'
    },
    header: {
        'content-type': 'application/json' // 默认值
    },
    success: function (res) {
        //console.log(res.data);
    },
    fail: function (err) {
        //console.log('错误码:' + err.errCode);
        //console.log('错误信息:' + err.errMsg);
    }
});

注意,基本套路就是把上述<method>进行替换,有效值有OPTIONS,GET, HEAD, POST, PUT, DELETE, TRACE/CONNECT。不过,本文中,苏南大叔就列举一下最常见的GETPOST即可。

智能小程序,request技术点的官方描述为:

GET

swan.request({
    url: 'https://smartprogram.baidu.com/xxx', // 仅为示例,并非真实的接口地址
    method: 'GET',
    dataType: 'json',
    data: {
        key: 'value'
    },
    header: {
        'content-type': 'application/json' // 默认值
    },
    success: function (res) {
    },
    fail: function (err) {
    }
});

POST

swan.request({
    url: 'https://smartprogram.baidu.com/xxx', // 仅为示例,并非真实的接口地址
    method: 'POST',
    dataType: 'json',
    data: {
        key: 'value'
    },
    header: {
        'content-type': 'application/json' // 默认值
    },
    success: function (res) {
    },
    fail: function (err) {
    }
});

跨域注意事项

这里要注意的事项就是:智能小程序是本地的文件,而远端接口就肯定和本地文件不是同一个域名下的。这里在提交数据的时候,就涉及到一个跨域的问题。也就是说,关于post操作的情况,要特别注意:

如果,您的目标仅仅是提交数据,并不关心返回值。那么,您可以不处理跨域问题,因为数据都是可以正常提交的。如果,您还期待根据返回值做不同的操作,那么,您需要设置CORS,下面有篇参考文章:

另外,如果您不希望设置CORS的话,那么,友情提示您还可以选择jsonp(但是这个时候,本质上是个GET)。在百度智能小程序开发中,也是可以支持的。

跨域方案之jsonp

至于jsonp的情况,官方并没有做详细说明。但是,经过苏南大叔的测试,这个jsonp是可以正常使用的。也就是说,为快速解决跨域问题,开了一个小口子。使用方法就是把json字样变成jsonp。注意:jsonp就是GET的一个小小变形,并不存在jsonpPOST方法,这个是需要明确的地方。

swan.request({
    url: 'https://smartprogram.baidu.com/xxx', // 仅为示例,并非真实的接口地址
    method: 'GET',
    dataType: 'jsonp',
    data: {
        key: 'value'
    },
    header: {
        'content-type': 'application/json' // 默认值
    },
    success: function (res) {
    },
    fail: function (err) {
    }
});

总结

这个智能小程序的ajax,核心语句就是swan.request。对于传统网页人员来说,就是jqueryajax方法的一个变型。基本上套路都是一致的。更多智能小程序相关经验文章,请点击苏南大叔的博客文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   百度    smartapp