Javascript AngularJS-SOAP服务与AngularJS模型的集成_Javascript_Ajax_Jquery_Angularjs

Javascript AngularJS-SOAP服务与AngularJS模型的集成

javascript ajax jquery angularjs

Javascript AngularJS-SOAP服务与AngularJS模型的集成,javascript,ajax,jquery,angularjs,Javascript,Ajax,Jquery,Angularjs,我是一名经验丰富的Flex开发人员，正在学习AngularJS。这太令人困惑了无论如何，我正试图通过soapwsdl请求对我的后端（在同一个域上）服务器进行服务调用，并使用AngularJS模型对象填充数据。我在尝试Ajax，但在获取实际数据时遇到了一些问题。我认为我创建SOAP标记的方式有问题。我得到了成功的回复，但没有数据在无法理解Ajax方法之后，我遇到了soapclient.js，发现它非常简单，代码比Ajax少。soapclient.js为您完成了大部分工作，与Ajax方法类似，后

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

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

在无法理解Ajax方法之后，我遇到了soapclient.js，发现它非常简单，代码比Ajax少。soapclient.js为您完成了大部分工作，与Ajax方法类似，后者生成的代码要少得多。此外，使用soapclient.js，我能够进行SOAP调用，并从XML格式的响应中获取数据

我的问题是，我试图使用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>


函数getData（）{
变量url2=”https://myService";
var pl=新的SOAPClientParameters（）；
pl.add（“arg0”，假）；
调用（url2，“methodToCall”，pl，true，getDataCallback）；
}
函数getDataCallback（r，soapResponse）{
警报（r.contents.payeeMailName）；
}
结果如何？

现在，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>

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;
  });

})


s
201-16-39063
1.
玛瑙道124号
201-16-39201
1.
转交凯文·马丁内斯，律师
C
201-16-38561
1.
南191公路1360号
0

AngularJS中进行服务调用的“正确”方式是什么，假设我这样做的方式是正确的，如果不让我知道最佳方式，那么在结果中，我如何循环XML响应中的数据并将其解析为AngularModel对象？我最终希望在DataGrid中使用这些数据

任何帮助都将不胜感激。

我想最好的方法是将其作为一个整体实施。我在我们的项目中这样做了，效果很好，因为$http调用保持不变

这是指向我为项目创建的提供商的链接：
我从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拦截器实例。调用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...
});

请记住，这段代码是为我们的项目编写的，它不是一个受支持的开源项目。在使用它之前，它可能需要一定程度的维护或重构，但这是一个良好的开端。

两年后，我构建了一个角度模块，专门用于处理GitHub上的SOAP web服务

下面是一篇关于如何使用它的博客文章：

长话短说，它允许您执行以下操作：

 <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>

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;
  });

})

您可以在没有任何SOAP wsdl库的情况下实现这一点。将wsdl导入SOAP UI并复制信封。下面是AngularJS中如何处理SOAP Web服务的示例

服务：

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
    });
}
});

app.service（'service'，函数（$http）{
this.soapService=函数（\u anydata）{
var_url='soap_服务_端点_url'；
var soapRequest=''；
var soapAction=''；
变量头={
“SOAPAction”：SOAPAction，
“内容类型”：“text/xml；charset=utf-8”
};
返回$http.post（_url，soapRequest{
“标题”：标题
});
}
});

调用服务并处理XML输出。您可以捕获所需的属性：

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;
});

service.soapService（数据）。然后（函数成功（响应）{
var_dataArr=[]；
$（response.data）.find（'Transaction'）.each（function（）{
_数据传送推送({
名称：$（this.find（“”）.text（）
});
});
返回_dataArr；
}，函数错误（响应）{
log（'谢谢。这很难，但我从soap服务器获得了一个wsdl。如何运行命令getPrice（）在it中？
我不是SOAP专家，javascript更适合我，但您通常通过引用SOAP服务的url并在末尾添加操作来调用SOAP操作，如：http//www.fakedomain.com/api/getPriceRequest您可以使用POST来执行此操作，并将WSDL中描述的消息发送到请求正文中。谢谢。您怎么做你通过SOAP调用传递数据？你会碰巧有一个包含这个的小项目吗？我是AngularJS的新手，我是一个Flex开发人员…在学习AngularJS的过程中，我的头撞在墙上试图把这些都拼凑起来。谢谢，我的实现是特定于项目的，所以我不能给你一个通用的工作解决方案。关于数据在soap调用中，将请求作为POST发送，并在$http options.DATA中传递soap参数。这是否适用于此soap服务器？@Andrew我在angularS.module（'myApp'，['angularS'这一行上遇到错误