今天搞這個 WebService 的調用方式了，整了一下午怎么也出不來，愁死了。唉，晚上吃完飯回來上網查下才發現需要在 WebApp 里的 Web.config 里需要配置（以下第 3 步），默認不支持 post 調用。唉，郁悶，看了很多 jQuery 如何調用 ASP.NET 的 WebService 的相關文章，就是沒題這個配置。希望寫文章的人，把代碼貼全了，也希望網上轉載別人文章的人別瞎轉載了，你到低試驗沒有啊，不好使也轉載，唉。不說了，寫下我的步驟吧。
1 、建立項目 WebService 和 WebApp 項目，如圖所示
2 、 Service1.asmx 代碼為：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
namespace WebService1
{
/// <summary>
/// Service1 的摘要說明
/// </summary>
[ WebService (Namespace = "http://tempuri.org/" )]
[ WebServiceBinding (ConformsTo = WsiProfiles .BasicProfile1_1)]
[System.ComponentModel. ToolboxItem ( false )]
// 若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消對下行的注釋。
[System.Web.Script.Services. ScriptService ]
public class Service1 : System.Web.Services. WebService
{
// 無參方法
[ WebMethod ]
public string HelloWorld()
{
return "Hello World" ;
}
// 有參方法 1
[ WebMethod ]
public int Add( int a, int b)
{
return a + b;
}
// 有參方法 2
[ WebMethod ]
public int Sum( int x)
{
int sum = 0;
for ( int i = 0; i <= x; i++)
{
sum += i;
}
return sum;
}
// 返回一個復合類型
[ WebMethod ]
public Student GetStudentByStuNo( string stuNo)
{
if (stuNo== "001" )
return new Student { StuNo = "001" , StuName = " 張三 " };
if (stuNo== "002" )
return new Student { StuNo = "002" , StuName = " 李四 " };
return null ;
}
// 返回返回泛型集合的
[ WebMethod ]
public List < Student > GetList()
{
List < Student > list = new List < Student >();
list.Add( new Student () { StuNo = "001" , StuName = " 張三 " });
list.Add( new Student () { StuNo = "002" , StuName = " 李四 " });
list.Add( new Student () { StuNo = "003" , StuName = " 王五 " });
return list;
}
// 返回 DataSet
[ WebMethod ]
public DataSet GetDataSet()
{
DataSet ds = new DataSet ();
DataTable dt = new DataTable ();
dt.Columns.Add( "StuNo" , Type .GetType( "System.String" ));
dt.Columns.Add( "StuName" , Type .GetType( "System.String" ));
DataRow dr = dt.NewRow();
dr[ "StuNo" ] = "001" ; dr[ "StuName" ] = " 張三 " ;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[ "StuNo" ] = "002" ; dr[ "StuName" ] = " 李四 " ;
dt.Rows.Add(dr);
ds.Tables.Add(dt);
return ds;
}
}
public class Student
{
public string StuNo { get ; set ; }
public string StuName { get ; set ; }
}
}
3 、打開 WebApp 項目 JqueryInvokeWebService 里的 web.config 文件，在 system.web 節下面加上以下配置
< webServices >
< protocols >
< add name = " HttpSoap " />
< add name = " HttpPost " />
< add name = " HttpGet " />
< add name = " Documentation " />
</ protocols >
</ webServices >
4 、 Default.aspx 代碼為：
<% @ Page Language ="C#" AutoEventWireup ="true" CodeBehind ="Default.aspx.cs" Inherits ="JqueryInvokeWebService._Default" %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns ="http://www.w3.org/1999/xhtml">
< head runat ="server">
< title ></ title >
< script src ="Scripts/jquery-1.4.1-vsdoc.js" type ="text/javascript"></ script >
< script type ="text/javascript">
// 1 、調用無參數方法
$(document).ready( function () {
$( '#Button1' ).click( function () {
$.ajax({
type: "POST" , // 訪問 WebService 使用 Post 方式請求
contentType: "application/json" , //WebService 會返回 Json 類型
url: "http://localhost:3152/Service1.asmx/HelloWorld" , // 調用 WebService 的地址和方法名稱組合 ---WsURL/ 方法名
data: "{}" , // 這里是要傳遞的參數，格式為 data: "{paraName:paraValue}", 下面將會看到
dataType: 'json' ,
success: function (result) { // 回調函數， result ，返回值
alert(result.d);
}
});
});
});
//2 、調用帶參數的方法
$(document).ready( function () {
$( '#Button2' ).click( function () {
$.ajax({
type: "POST" , // 訪問 WebService 使用 Post 方式請求
contentType: "application/json" , //WebService 會返回 Json 類型
url: "http://localhost:3152/Service1.asmx/Add" , // 調用 WebService 的地址和方法名稱組合 ---WsURL/ 方法名
data: "{a:3,b:4}" , // 注意參數名字要和 WebService 里的 Add 方法里參數名字一致，否則不得行
dataType: 'json' ,
success: function (result) { // 回調函數， result ，返回值
alert(result.d);
}
});
});
});
//3 、調用復合類型的方法
$(document).ready( function () {
$( '#Button3' ).click( function () {
$.ajax({
type: "POST" , // 訪問 WebService 使用 Post 方式請求
contentType: "application/json" , //WebService 會返回 Json 類型
url: "http://localhost:3152/Service1.asmx/GetStudentByStuNo" , // 調用 WebService 的地址和方法名稱組合 ---WsURL/ 方法名
data: "{stuNo:'002'}" ,
dataType: 'json' ,
success: function (result) { // 回調函數， result ，返回值
alert( " 學號： " +result.d[ "StuNo" ] + ", 姓名： " + result.d[ "StuName" ]);
}
});
});
});
//4 、調用返回泛型集合的方法
$(document).ready( function () {
$( '#Button4' ).click( function () {
$.ajax({
type: "POST" , // 訪問 WebService 使用 Post 方式請求
contentType: "application/json" , //WebService 會返回 Json 類型
url: "http://localhost:3152/Service1.asmx/GetList" , // 調用 WebService 的地址和方法名稱組合 ---WsURL/ 方法名
data: "{}" ,
dataType: 'json' ,
success: function (result) { // 回調函數， result ，返回值
$(result.d).each( function () {
$( "#lbResult" ).append( this [ "StuNo" ] + "," + this [ "StuName" ] + "<br />" );
});
}
});
});
});
// 5 、調用返回 DataSet(xml 格式 ) 的方法
$(document).ready( function () {
$( '#Button5' ).click( function () {
$.ajax({
type: "POST" , // 訪問 WebService 使用 Post 方式請求
url: "http://localhost:3152/Service1.asmx/GetDataSet" , // 調用 WebService 的地址和方法名稱組合 ---WsURL/ 方法名
data: "{}" ,
dataType: "xml" , // 返回 XML 數據類型
success: function (result) { // 回調函數， result ，返回值
$(result).find( "Table1" ).each( function () {
alert( " 學號： " + $( this ).find( "StuNo" ).text() + ", 姓名： " + $( this ).find( "StuName" ).text());
$( '#lbResult' ).append($( this ).find( "StuNo" ).text() + " " + $( this ).find( "StuName" ).text() + "<br />" );
});
}
});
});
});
// 顯示動畫效果
$(document).ready( function () {
$( '#loading' ).ajaxStart( function () {
$( this ).show();
}).ajaxStop( function () {
$( this ).hide();
});
});
</ script >
</ head >
< body >
< form id ="form1" runat ="server">
< div >
< input id ="Button1" type ="button" value =" 調用無參數方法 " />< br />
< input id ="Button2" type ="button" value =" 調用帶參數方法 " />< br />
< input id ="Button3" type ="button" value =" 調用復合類型的方法 " />< br />
< input id ="Button4" type ="button" value =" 調用返回泛型集合的方法 " />< br />
<span styl
發表評論
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
評論