下面是详细的“jQuery中调用WebService方法小结”的攻略:
下面是详细的“jQuery中调用WebService方法小结”的攻略:
1. 了解 jQuery.ajax() 方法
在调用 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 请求失败后的回调函数。
2. 调用 WebService 方法
调用 WebSerivce 方法的过程可以分为 3 步:
- 创建 SOAP 消息体
- 发送 AJAX 请求并处理响应
- 解析响应数据
实现这些步骤的代码如下所示:
// 步骤 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);
}
});
沃梦达教程
本文标题为:jQuery中调用WebService方法小结
基础教程推荐
猜你喜欢
- 解析OpenLayers 3加载矢量地图源的问题 2023-08-11
- JavaScript中in和hasOwnProperty区别详解 2023-12-01
- 妙用Ajax技术实现局部刷新商品数量和总价实例代码 2022-12-28
- Ajax实现phpcms 点赞功能实例代码 2023-01-31
- 配置Nginx根据按规则访问后台服务器--Nginx集成Vcenter 6.X HTML Console系列之 4--(共4) 2023-10-29
- php – 如何在MySQL数据库中保留HTML格式? 2023-10-26
- 关于前端ajax请求的优雅方案(http客户端为axios) 2023-02-15
- JavaScript中? ?、??=、?.和 ||的区别浅析 2022-10-21
- 通用的二级菜单代码(css+javascript) 2024-01-22
- javascript-是否有HTML5方法显示已加载到内存中的tiff图像数据 2023-10-25