19

我是一名经验丰富的 Flex 开发人员，正在学习 AngularJS。这太混乱了！！！

无论如何，我正在尝试通过 SOAP WSDL 请求对我的后端（在同一域上）服务器进行服务调用，并使用 AngularJS 模型对象填充数据。我正在尝试 Ajax，但在获取实际数据时遇到了一些问题。我认为我创建 SOAP 标记的方式有问题。我得到了成功的回复，但没有数据。

在无法弄清楚 Ajax 方法后，我偶然发现了 soapclient.js，发现它非常简单，代码比 Ajax 少。soapclient.js 为您完成了大部分工作，类似于 Ajax 方法，这使得代码更少。此外，使用soapclient.js，我可以进行SOAP 调用，还可以获取XML 格式响应的数据。

http://javascriptsoapclient.codeplex.com

我的问题是我正在尝试使用 AngularJS 将 XML 响应转储到 AnularJS 模型对象中。我不确定如何为我正在做的事情设置 AngularJS 项目，但我真的很想知道最好的方法，以保持我正在做的事情的解耦。我一直在疯狂地搜索谷歌，但大多数例子对于初学者来说似乎过于复杂。

这是我所拥有的：

<html>
<head>
    <script language="JavaScript" type="text/javascript" src="jquery-1.10.1.js"></script>
    <script language="JavaScript" type="text/javascript" src="soapclient.js"></script>

    <script type="text/javascript">
        function getData() {
            var url2 = "https://myService";
            var pl = new SOAPClientParameters();

            pl.add("arg0", false);

            SOAPClient.invoke(url2, "methodToCall", pl, true, getDataCallback);
        }

        function getDataCallback(r, soapResponse) {
            alert(r.contents.payeeMailName);
        }
    </script>
</head>

<body>
<form>
    <input type="button" value="Click Here to Call Web Service" onClick="getData()" style="width: 192px">
</form>
<div id="result">Result?</div>
</body>
</html>

现在，SOAP 服务返回如下数据：

 <return>
    <contents>
       <eftAcctType>S</eftAcctType>
       <id>
          <djNumber>201-16-39063</djNumber>
          <djSequence>1</djSequence>
       </id>
       <payeeAddrLine1>124 Agate Drive</payeeAddrLine1>
    </contents>
    <contents>
       <eftAcctType/>
       <id>
          <djNumber>201-16-39201</djNumber>
          <djSequence>1</djSequence>
       </id>
       <payeeAddrLine1>c/o Kevin Martinez, Attorney at Law</payeeAddrLine1>
    </contents>
    <contents>
       <eftAcctType>C</eftAcctType>
       <id>
          <djNumber>201-16-38561</djNumber>
          <djSequence>1</djSequence>
       </id>
       <payeeAddrLine1>1360 South Highway 191</payeeAddrLine1>
    </contents>
    <status>0</status>
 </return>

AngularJS中进行服务调用的“正确”方式是什么，假设我这样做的方式没问题，如果不让我知道最好的方式，然后在结果中，我如何循环遍历XML响应中的数据并将其解析为 Angular 模型对象？我最终想在 DataGrid 中使用这些数据。

任何帮助都感激不尽。

4

3 回答 3

19

晚了两年，但我已经构建了一个 Angular 模块，专门用于在 GitHub 上使用 SOAP Web 服务。

https://github.com/andrewmcgivery/angular-soap

这是一篇关于如何使用它的博客文章：http: //mcgivery.com/soap-web-services-angular-ionic/

长话短说，它允许你做这样的事情：

angular.module('myApp', ['angularSoap'])

.factory("testService", ['$soap',function($soap){
    var base_url = "http://www.cooldomain.com/SoapTest/webservicedemo.asmx";

    return {
        HelloWorld: function(){
            return $soap.post(base_url,"HelloWorld");
        }
    }
}])

.controller('MainCtrl', function($scope, testService) {

  testService.HelloWorld().then(function(response){
    $scope.response = response;
  });

})
于 2015-03-31T14:34:29.937 回答
8

我想最好的方法是将它实现为$http 拦截器。我在我们的项目中做到了，效果很好，因为角度 $http 调用保持不变。

这是我为我们的项目创建的提供程序的链接：http: //jsfiddle.net/gqp9m/
我从soapclient 库中复制粘贴了一些内容，并将其移到了提供程序中。我还更改了一些语法，因此代码将通过 jsHint。大多数修改后的功能都用文档注释进行了注释。它还需要 jQuery（对于 $.parseXML 函数 - 您可以重构它以删除 jQuery 中的依赖项）。

最大的不同是我的代码不会在第一次请求时加载 wsdl，而是需要您在进行任何调用之前对其进行缓存，如下所示：

myModule.service(['myModule.soap-interceptor', function(soap){
    $http.get('http://www.myveryfakedomain.com/CRMAPIWS74?wsdl', 
    { isJSON: true }).then(function(result){
        soap.setWSDL('http:/www.myveryfakedomain.com/CRMAPIWS74', result.data);
    });
}]);

soap是注入的soap-interceptor实例。您调用 wsdl，然后调用soap.setWSDL，将基本 url 和解析的 wsdl 传递给它。还要注意传递给 $http 调用的isJSON参数。这是因为默认情况下我的代码将每个调用都视为 SOAP 请求。这就是拦截器所做的。isJSON:true将允许您按照上帝的意图使用 $http ;)

调用setWSDL后，只需像往常一样调用 $http：

$http.get('http:/www.myveryfakedomain.com/CRMAPIWS74/action').then(function(result){
    // do something...
});

请记住，此代码是为我们的项目编写的，它不是受支持的开源项目或其他东西。在您使用它之前，它可能需要进行一定程度的维护或重构，但这是一个好的开始。

于 2014-01-08T06:49:40.370 回答
0

You can achieve this without any SOAP wsdl libraries. import your wsdl into SOAP UI and copy the envelope. below is the example in AngularJS how to handle SOAP Web Service.

Service:

app.service('service', function($http) {
this.soapService = function(_anydata) {
    var _url = 'soap_service_endpoint_url';
    var soapRequest = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:jn=""><soapenv:Header/><soapenv:Body><=== xxx ===></soapenv:Body></soapenv:Envelope>';
    var soapAction = '<=== soap action ===>';
    var headers = {
        'SOAPAction': soapAction,
        'Content-Type': 'text/xml; charset=utf-8'
    };
    return $http.post(_url, soapRequest, {
        "headers": headers
    });
}
});

call the service and handle the XML output. you can capture the attributes you want:

service.soapService(data).then(function success(response) {
var _dataArr = [];
$(response.data).find('Transaction').each(function() {
    _dataArr.push({
        name: $(this).find('<=== your attributes ===>').text()
    });
});
return _dataArr;
}, function error(response) {
console.log('<==== soap error: ' + response);
return response;
});
于 2018-09-11T21:01:07.560 回答