JQuery AJAX调用WEB SERVICE方法
类定义
/// <summary>
/// 员工信息
/// </summary>
public class EmployeeEntity{
/// <summary>
/// 员工姓名
/// </summary>
public string EmployeeName{get;set;}
/// <summary>
/// 生日
/// </summary>
public string Birthday{get;set;}
}
WEB SERVICE定义
/// <summary>
/// JQuery测试服务
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class Service1 : System.Web.Services.WebService{
/// <summary>
/// 不含参数测试
/// </summary>
/// <returns>返回Hello World</returns>
[WebMethod]
public string HelloWorld(){
return "Hello World";
}
/// <summary>
/// 带参数测试
/// </summary>
/// <param name="yourName">你的姓名</param>
/// <param name="age">年龄</param>
/// <returns>返回一段问候</returns>
[WebMethod]
public string GetHello(string yourName, int age){
return string.Format("Hello {0} , your age is {1}", yourName, age);
}
/// <summary>
/// 获得类实例
/// </summary>
/// <returns>员工信息实体</returns>
[WebMethod]
public EmployeeEntity GetEmployeeEntity(){
return new EmployeeEntity(){
EmployeeName = "张三",
Birthday = "2000-07-12"
};
}
/// <summary>
/// 获得集合对象
/// </summary>
/// <returns>集合对象</returns>
[WebMethod]
public List<string> GetList(){
List<string> countryList = new List<string>();
countryList.Add("中国");
countryList.Add("美国");
countryList.Add("法国");
countryList.Add("德国");
return countryList;
}
/// <summary>
/// 获得DataSet
/// </summary>
/// <returns>DataSet对象</returns>
[WebMethod]
public DataSet GetDataSet(){
DataSet dataSet = new DataSet();
DataTable dataTable = new DataTable("employeeTable");
dataTable.Columns.AddRange(new DataColumn[]{
new DataColumn("EmployeeName",typeof(string)),
new DataColumn("Age",typeof(int)),
new DataColumn("Birthday",typeof(string))
});
dataTable.Rows.Add(new object[] { "李白", "63", "1320-05-06" });
dataTable.Rows.Add(new object[] { "王刚", "60", "1920-05-06" });
dataTable.Rows.Add(new object[] { "李毅", "53", "1820-05-06" });
dataSet.Tables.Add(dataTable);
return dataSet;
}
}
调用页面
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery AJAX调用各种WEB SERVICE</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//不带参数调用
$('#callWithNoParameter').click(function (event) {
$.ajax({
type: 'POST',
contentType: 'application/json',
url: 'http://localhost:8117/Service1.asmx/HelloWorld',
data: '{}',
dataType: 'json',
success: function (result) {
alert(result.d);
}
});
event.preventDefault();
});
//带参数调用
$('#callWithParameter').click(function (event) {
$.ajax({
type: 'POST',
contentType: 'application/json',
url: 'http://localhost:8117/Service1.asmx/GetHello',
data: '{yourName:"李四",age:25}',
dataType: 'json',
success: function (result) {
alert(result.d);
}
});
event.preventDefault();
});
//返回类实例对象
$('#getClassInstance').click(function (event) {
$.ajax({
type: 'POST',
contentType: 'application/json',
url: 'http://localhost:8117/Service1.asmx/GetEmployeeEntity',
data: '{}',
dataType: 'json',
success: function (result) {
$(result.d).each(function () {
alert('你的姓名是:' + this['EmployeeName'] + ' 生日是:' + this['Birthday']);
});
}
});
event.preventDefault();
});
//返回集合
$('#getList').click(function (event) {
$.ajax({
type: 'POST',
contentType: 'application/json',
url: 'http://localhost:8117/Service1.asmx/GetList',
data: '{}',
dataType: 'json',
success: function (result) {
$(result.d).each(function () {
alert(this.toString());
});
}
});
event.preventDefault();
});
//返回DataSet
$('#getDataSet').click(function (event) {
$.ajax({
type: 'POST',
url: 'http://localhost:8117/Service1.asmx/GetDataSet',
data: '{}',
dataType: 'xml',
success: function (result) {
try {
$(result).find('employeeTable').each(function () {
alert(
'姓名=' + $(this).find('EmployeeName').text() + ';' +
'年龄=' + $(this).find('Age').text() + ';' +
'生日=' + $(this).find('Birthday').text());
});
}
catch (e) {
alert(e);
}
},
error: function (result, status) {
alert(status);
}
});
event.preventDefault();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="callWithNoParameter">不带参数调用</button>
<button id="callWithParameter">带参数调用</button>
<button id="getClassInstance">获得类实例</button>
<button id="getList">获得集合</button>
<button id="getDataSet">获得DataSet</button>
</div>
</form>
</body>
</html>
分类: JavaScript, jQuery
