百度智能小程序，如何利用ajax提交数据？

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

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

本文测试环境：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。不过，本文中，苏南大叔就列举一下最常见的GET和POST即可。

智能小程序，request技术点的官方描述为：

• https://smartprogram.baidu.com/docs/develop/api/net_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，下面有篇参考文章：

• https://newsn.net/say/cross-domain-ajax-cors.html

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

• https://newsn.net/say/cross-domain-ajax-jsonp.html

跨域方案之jsonp

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

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。对于传统网页人员来说，就是jquery的ajax方法的一个变型。基本上套路都是一致的。更多智能小程序相关经验文章，请点击苏南大叔的博客文章：

• https://newsn.net/tag/smartapp/

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