下面是详细的“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方法小结
猜你喜欢
- 解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容 2023-12-14
- ajax实现从后台拿数据显示在HTML前端的方法 2023-02-23
- 通过CSS实现逼真水滴动效 2022-11-20
- 用vue创建项目 2023-10-08
- JS跨域总结 2023-12-24
- 两种方法实现用CSS切割图片只取图片中一部分 2023-12-14
- 纯CSS实现鼠标悬停显示图片效果的实例分享 2024-01-05
- js中textContent、innerText和innerHTML的用法以及区别 2023-07-10
- moment转化时间戳出现Invalid Date的问题及解决 2023-07-09
- JS获取当前网址、主机地址项目根路径 2023-12-01