使用带有 SOAP 的 AJAX jQuery 调用 WebService
[英]Calling WebService Using AJAX jQuery With SOAP
问题描述
我正在从本指南复制/粘贴此 HTML 代码，但无法使服务正常工作。
文章讲了一个用来做简单算术计算的WebService，我有幸找到了一个提供相同服务的端点：
http://www.dneonline.com/calculator.asmx?WSDL
所以我启动 WcfStorm，如果我尝试请求一个3 + 5的 SOAP 调用，我会收到结果8 ：
一切都很好，所以现在让我们注入调用：
<Add>
<MethodParameters>
<intA>3</intA>
<intB>5</intB>
</MethodParameters>
</Add>
进入我在文章中找到的 HTML 代码：
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#BTNSERVICE").click(function (event) {
var webserUrl = "http://www.dneonline.com/calculator.asmx?WSDL";
var soapRequest =
'<?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> \
<Add> \
<MethodParameters> \
<intA>0</intA> \
<intB>0</intB> \
</MethodParameters> \
</Add> \
</soap:Body> \
</soap:Envelope>';
$.ajax({
type: "POST",
url: webserUrl,
contentType: "text/xml",
dataType: "xml",
data: soapRequest,
success: SuccessOccur,
error: ErrorOccur
});
});
});
function SuccessOccur(data, status, req) {
if (status == "success")
alert(req.responseText);
}
function ErrorOccur(data, status, req) {
alert(req.responseText + " " + status);
}
</script>
</head>
<body>
<form runat="server">
<asp:button id="BTNSERVICE" runat="server" text="BTNSERVICE" />
SAMPLE Application to test service
</form>
</body>
</html>
我将他的文件保存为 .HTML 文件，如果使用 FireFox 打开，但没有任何乐趣：
我究竟做错了什么？ 我实际上是按照指南一步一步来的。
1 个解决方案
解决方案1
1 已采纳 2019-08-27 22:02:09
您的问题出在您的soapRequest 中，正是这一行：
<Add> \
打开这个网址http://www.dneonline.com/calculator.asmx?op=Add你可以看到你的Add方法是：
<Add xmlns="http://tempuri.org/">
实际上，您收到的错误消息是：
Unable to handle request without a valid action parameter. Please supply a valid soap action.
片段：
// the following in order to handle cors in this demo.... jQuery.ajaxPrefilter(function(options) { if (options.crossDomain && jQuery.support.cors) { options.url = 'https://cors-anywhere.herokuapp.com/' + options.url; } }); $("#BTNSERVICE").click(function (event) { var intA = $('#intA').val(); var intB = $('#intB').val(); var soapRequest = `<?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> <Add xmlns="http://tempuri.org/"> <intA>${intA}</intA> <intB>${intB}</intB> </Add> </soap:Body> </soap:Envelope>`; var webserUrl = "http://www.dneonline.com/calculator.asmx?WSDL"; var self = this; self.disabled = true; $.ajax({ type: "POST", url: webserUrl, dataType: "xml", processData: false, contentType: "text/xml; charset=\\"utf-8\\"", data: soapRequest, success: function (data, status, req) { if (status == "success") { var result = $(req.responseXML).find('AddResult').text(); $('#AddResult').val(result); } }, error: function (data, status, req) { $('#errmsg').text(data.responseText); }, complete: function(data, status) { self.disabled = false; } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form runat="server"> intA: <input id="intA" type="text" value="0"> <br> intB: <input id="intB" type="text" value="0"> <br> AddResult: <input id="AddResult" type="text" value="0"> <br> <button id="BTNSERVICE" type="button">SAMPLE Application to test service</button> </form> <div id="errmsg"></div>
包含代码的最小 html 文件如下。 您可以在其中看到我在何处以及如何添加 js 和 html 表单元素：
- 在标题部分，您可以看到我是如何添加 jQuery 库和 js 代码的
- 在正文部分，您可以看到带有输入字段和按钮的表单元素。
以下是最小的 html 文件，仅包含您可以使用的 js 代码和 html 标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- in the header section you can add javascript --> <!-- include the jQuery library version 3.3.1 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- include javascript code --> <script> // the following in order to handle cors in this demo.... // for details see: https://github.com/Rob--W/cors-anywhere/#documentation jQuery.ajaxPrefilter(function (options) { if (options.crossDomain && jQuery.support.cors) { options.url = 'https://cors-anywhere.herokuapp.com/' + options.url; } }); // on DOM ready... $(function () { // the following event handler will handle click events for BUTTON $("#BTNSERVICE").on('click', function (event) { var intA = $('#intA').val(); var intB = $('#intB').val(); var soapRequest = `<?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> <Add xmlns="http://tempuri.org/"> <intA>${intA}</intA> <intB>${intB}</intB> </Add> </soap:Body> </soap:Envelope>`; var webserUrl = "http://www.dneonline.com/calculator.asmx?WSDL"; var self = this; self.disabled = true; $.ajax({ type: "POST", url: webserUrl, dataType: "xml", processData: false, contentType: "text/xml; charset=\\"utf-8\\"", data: soapRequest, success: function (data, status, req) { if (status == "success") { var result = $(req.responseXML).find('AddResult').text(); $('#AddResult').val(result); } }, error: function (data, status, req) { $('#errmsg').text(data.responseText); }, complete: function (data, status) { self.disabled = false; } }); }); }); </script> </head> <body> <!-- in the body section you can add form --> <form runat="server"> intA: <input id="intA" type="text" value="0"> <br> intB: <input id="intB" type="text" value="0"> <br> AddResult: <input id="AddResult" type="text" value="0"> <br> <button id="BTNSERVICE" type="button">SAMPLE Application to test service</button> </form> <div id="errmsg"></div> </body> </html>
使用 jQuery/Ajax 从 JavaScript 调用 WCF/JSON/REST WebService
[英]Calling WCF/JSON/REST WebService from JavaScript using jQuery/Ajax
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.