我正在复制/粘贴此HTML代码from this guide,但无法使该服务正常工作。
本文讨论了用于执行简单算术计算的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打开,但没有任何乐趣:
我究竟做错了什么?我确实会逐步遵循指南。
最佳答案
您的问题出在您的soapRequest中,正是这一行:
<Add> \
打开此URL 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>