下面是详细的“jQuery中调用WebService方法小结”的攻略:
在调用 WebService 方法前,首先需要了解 jQuery 提供的核心方法 jQuery.ajax()
。该方法通过异步 HTTP(Ajax)请求从服务器上加载数据。
$.ajax({
url: "WebService路径",
type: "POST", // 发送 POST 请求
data: "参数1=值1&参数2=值2",
dataType: "数据类型",
success: function(result) {
// AJAX 请求成功回调函数
},
error: function(err) {
// AJAX 请求失败回调函数
}
});
上面的代码中,需要替换其中的几个关键信息:
url
:WebService 的路径,根据实际情况进行修改;data
:请求参数名和参数值,多个参数使用 &
连接;dataType
:接收到的数据类型,可选为 "text"
、"xml"
、"json"
等;success
:AJAX 请求成功后的回调函数;error
:AJAX 请求失败后的回调函数。调用 WebSerivce 方法的过程可以分为 3 步:
实现这些步骤的代码如下所示:
// 步骤 1:创建 SOAP 消息体字符串
var soapMessage = '<?xml version="1.0" encoding="utf-8"?>';
soapMessage += '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ';
soapMessage += 'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ';
soapMessage += 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
soapMessage += '<soap:Body>';
soapMessage += '<WebSerivce方法名 xmlns="命名空间">';
soapMessage += '<参数1>值1</参数1>';
soapMessage += '<参数2>值2</参数2>';
soapMessage += '</WebSerivce方法名>';
soapMessage += '</soap:Body>';
soapMessage += '</soap:Envelope>';
// 步骤 2:发送 AJAX 请求并处理响应
$.ajax({
url: "WebService路径",
type: "POST", // 发送 POST 请求
contentType: "text/xml; charset=utf-8", // 指定请求头类型
data: soapMessage, // 发送 SOAP 消息体
dataType: "xml",
success: function(response) {
// 步骤 3:解析响应数据
var result = $(response).find("WebSerivce方法名Result");
console.log(result.text());
},
error: function(err) {
console.log(err);
}
});
示例 1:调用 C# WebService
这是一个简单的 C# WebService 方法,用于计算两个整数之和并返回结果。
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Services.WebServiceBindingAttribute(Name="CalculatorServiceSoap")]
public class CalculatorService : System.Web.Services.WebService
{
[WebMethod]
public int Add(int a, int b)
{
return a + b;
}
}
在 jQuery 中调用该 WebService 方法的代码如下:
// 创建 SOAP 消息体字符串
var soapMessage = '<?xml version="1.0" encoding="utf-8"?>';
soapMessage += '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ';
soapMessage += 'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ';
soapMessage += 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
soapMessage += '<soap:Body>';
soapMessage += '<Add xmlns="http://tempuri.org/">';
soapMessage += '<a>1</a>';
soapMessage += '<b>2</b>';
soapMessage += '</Add>';
soapMessage += '</soap:Body>';
soapMessage += '</soap:Envelope>';
// 发送 AJAX 请求
$.ajax({
url: "http://localhost:58403/CalculatorService.asmx",
type: "POST",
contentType: "text/xml; charset=utf-8",
data: soapMessage,
dataType: "xml",
success: function(response) {
// 解析响应数据
var result = $(response).find("AddResult");
console.log(result.text()); // 输出 3
},
error: function(err) {
console.log(err);
}
});
示例 2:调用 PHP WebService
这是一个简单的 PHP WebService 方法,用于返回字符串。
<?php
header("Content-Type: text/xml; charset=utf-8");
echo '<?xml version="1.0" encoding="utf-8"?>';
echo '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ';
echo 'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ';
echo 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
echo '<soap:Body>';
echo '<HelloWorld xmlns="命名空间"/>';
echo '</soap:Body>';
echo '</soap:Envelope>';
?>
在 jQuery 中调用该 WebService 方法的代码如下:
// 创建 SOAP 消息体字符串
var soapMessage = '<?xml version="1.0" encoding="utf-8"?>';
soapMessage += '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ';
soapMessage += 'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ';
soapMessage += 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
soapMessage += '<soap:Body>';
soapMessage += '<HelloWorld xmlns="命名空间"/>';
soapMessage += '</soap:Body>';
soapMessage += '</soap:Envelope>';
// 发送 AJAX 请求
$.ajax({
url: "http://localhost/HelloWorldService.php",
type: "POST",
contentType: "text/xml; charset=utf-8",
data: soapMessage,
dataType: "xml",
success: function(response) {
// 解析响应数据
var result = $(response).find("HelloWorldResult");
console.log(result.text()); // 输出 HelloWorld
},
error: function(err) {
console.log(err);
}
});
本文链接:http://task.lmcjl.com/news/11759.html