问题
这实际上是三个问题:
- 微信小程序请求获取
SOAP
协议格式的数据 - 将获取到的
xml
解析成可用的字符串 - 将字符转转化为
json
对象供界面使用
背景
看看后台这扎心的数据,作为2010后的程序员,给你这样的接口,你第一眼是不是也是一脸懵逼的状态。
是的,没有错,是HTTP请求,但是请求的请求体和响应的响应体,都是SOUP格式的数据。不多bb,直接看怎么处理吧!
微信小程序请求获取 SOAP
协议格式的数据
根据后台给的请求格式如下:
POST /weixin.asmx HTTP/1.1
Host: sqlb.mynatapp.cc
Content-Type: text/xml; charset=utf-8
Content-Length: length
SOAPAction: "lib/dzLogin"
<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
<dzLogin xmlns="lib">
<yhm>string</yhm>
<mm>string</mm>
<checkcol>string</checkcol>
<openid>string</openid>
</dzLogin>
</soap:Body>
</soap:Envelope>
写个请求在微信小程序中很容易,我们只需要把上面格式的请求数据,拼接,组装成一个 http
请求就行了。
// 获取soap格式数据
getHttpdata: function () {
//组装请求体
var httpBody = '<?xml version="1.0" encoding="utf-8"?>';
httpBody += '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
httpBody += '<soap:Body>';
httpBody += '<dzLogin xmlns="lib">';
httpBody += ' <yhm>' + '123' + '</yhm>';
httpBody += '<mm>' + '123' + '</mm>';
httpBody += '<checkcol>' + 'barcode' + '</checkcol>';
httpBody += '<openid> ' + 'oK1xqv1H0Q503Uk7R2QuEZ8k-H1w' + '</openid>';
httpBody += '</dzLogin>';
httpBody += '</soap:Body>';
httpBody += '</soap:Envelope>';
wx.request({
url: 'https://sqlb.mynatapp.cc/weixin.asmx?op=dzLogin',
data: httpBody, //请求体
method: 'POST', //使用POST请求
header: { // 设置请求的 header
'content-type': 'text/xml; charset=utf-8',
'SOAPAction': 'lib/dzLogin', //因为后台给的请求头上有该数据,所以也得加上
},
success: function (res) {
console.log(res); //得到有规则的xml数据
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
得到的 soap
数据格式如下:
格式化后如下,且不说这个借口数据格式怎么样,显然,这样的数据,我们还需要进一步提取,才能使用。
<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<soap:Body>
<dzLoginResponse xmlns="lib">
<dzLoginResult>[{"RESULT":"true","dzrefcode":"71497","needexamdzrefcode":"0"}]</dzLoginResult>
</dzLoginResponse>
</soap:Body>
</soap:Envelope>
将获取到的 xml
数据解析成可用的字符串
我们都知道,在小程序中,界面上是没有 DOM
和 window
这种概念。所以,很显然,我们这个 xml
数据解析,实际上就是DOM
节点解析,该怎么办?也很容易,自己讲 DOM
操作的脚本导入进去就行了。脚本文件在这里:https://github.com/jindw/xmldom
新建一个lib
文件夹,将 dom.js、dom-parser.js、sax.js、entities.js
拷贝到里面(lib文件夹与pages、utils平级)
准备好后,就可以解析数据了:
//导入包
var Parser = require('../../../lib/dom-parser.js');
//微信请求成功
success: function (res) {
//新建DOM解析对象
var parser = new Parser.DOMParser();
//基于请求到的 XML数据 来构建DOM对象
var xmlDoc = parser.parseFromString(res.data, "text/xml");
//获取DOM节点的标签为 dzLoginResult 的第一个节点对象
var dzLoginResult = xmlDoc.getElementsByTagName('dzLoginResult')[0];
//得到节点数据,文本也是节点所以使用firstChild.nodeValue,只有文本节点,所以firstChild就是文本节点
console.log(dzLoginResult.firstChild.nodeValue); //nodeValue问节点值
//转化为json对象
var jsond = JSON.parse(dzLoginResult.firstChild.nodeValue);
console.log(jsond[0].dzrefcode);
}
将字符转转化为 json
对象供界面使用
上面其实已经给出来了:
//转化为json对象,得到的就是可以在开发中使用json对象
var jsond = JSON.parse(dzLoginResult.firstChild.nodeValue);
这里要说明的是:
JSON.stingify()
可以将JSON
对象或者数组转换成json
格式字符串JSON.parse()
将json格式的字符串,转换成JSON
对象或者数组