首頁 > 開發者 > ASP

jQuery Ajax方法調用Asp.Net WebService的詳細例子

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這很常用，搜尋了一下部落格園的“找找看”和Google，看到大部分都是轉載於一兩篇文章（而且來源還不是部落格園），有的是簡單的說一點無法運行，給初學者的調試和學習帶來不方便，我在這裡將jQuery Ajax 調用Aspx.Net WebService 的幾個常用的方法做了一個整理，提供給正在找這方面內容的博友，希望能給學習jQuery的朋友一點協助，可以直接複製代碼運行。

ws.aspx 代碼

<!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 id="Head1" runat="server">
　　<title></title>
　　<script src="jquery.js" type="text/javascript"></script>
　　<style type="text/css">
　　　　.hover
　　　　{
　　　　　　cursor: pointer; /*小手*/
　　　　　　background: #ffc; /*背景*/
　　　　}
　　　　.button
　　　　{
　　　　　　width: 150px;
　　　　　　float: left;
　　　　　　text-align: center;
　　　　　　margin: 10px;
　　　　　　padding: 10px;
　　　　　　border: 1px solid #888;
　　　　}
　　　　#dictionary
　　　　{
　　　　　　text-align: center;
　　　　　　font-size: 18px;
　　　　　　clear: both;
　　　　　　border-top: 3px solid #888;
　　　　}
　　　　#loading
　　　　{
　　　　　　border: 1px #000 solid;
　　　　　　background-color: #eee;
　　　　　　padding: 20px;
　　　　　　margin: 100px 0 0 200px;
　　　　　　position: absolute;
　　　　　　display: none;
　　　　}
　　　　#switcher
　　　　{
　　　　}
　　</style>
　　<script type="text/javascript">
　　　　//無參數調用
　　　　$(document).ready(function() {
　　　　　　$('#btn1').click(function() {
　　　　　　　　$.ajax({
　　　　　　　　　　type: "POST",　 //訪問WebService使用Post方式請求
　　　　　　　　　　contentType: "application/json", //WebService 會返回Json類型
　　　　　　　　　　url: "WebService1.asmx/HelloWorld", //調用WebService的地址和方法名稱組合 ---- WsURL/方法名
　　　　　　　　　　data: "{}",　　　　 //這裡是要傳遞的參數，格式為 data: "{paraName:paraValue}",下面將會看到
　　　　　　　　　　dataType: 'json',
　　　　　　　　　　success: function(result) {　　 //回呼函數，result，傳回值
　　　　　　　　　　　　$('#dictionary').append(result.d);
　　　　　　　　　　}
　　　　　　　　});
　　　　　　});
　　　　});
　　　　//有參數調用
　　　　$(document).ready(function() {
　　　　　　$("#btn2").click(function() {
　　　　　　　　$.ajax({
　　　　　　　　　　type: "POST",
　　　　　　　　　　contentType: "application/json",
　　　　　　　　　　url: "WebService1.asmx/GetWish",
　　　　　　　　　　data: "{value1:'心想事成',value2:'萬事如意',value3:'牛牛牛',value4:2009}",
　　　　　　　　　　dataType: 'json',
　　　　　　　　　　success: function(result) {
　　　　　　　　　　　　$('#dictionary').append(result.d);
　　　　　　　　　　}
　　　　　　　　});
　　　　　　});
　　　　});

　　　　//返回集合（引用自網路，很說明問題）
　　　　$(document).ready(function() {
　　　　　　$("#btn3").click(function() {
　　　　　　　　$.ajax({
　　　　　　　　　　type: "POST",
　　　　　　　　　　contentType: "application/json",
　　　　　　　　　　url: "WebService1.asmx/GetArray",
　　　　　　　　　　data: "{i:10}",
　　　　　　　　　　dataType: 'json',
　　　　　　　　　　success: function(result) {
　　　　　　　　　　　　$(result.d).each(function() {
　　　　　　　　　　　　　　//alert(this);
　　　　　　　　　　　　　　$('#dictionary').append(this.toString() + " ");
　　　　　　　　　　　　　　//alert(result.d.join(" | "));
　　　　　　　　　　　　});
　　　　　　　　　　}
　　　　　　　　});
　　　　　　});
　　　　});
　　　　//返回複合類型
　　　　$(document).ready(function() {
　　　　　　$('#btn4').click(function() {
　　　　　　　　$.ajax({
　　　　　　　　　　type: "POST",
　　　　　　　　　　contentType: "application/json",
　　　　　　　　　　url: "WebService1.asmx/GetClass",
　　　　　　　　　　data: "{}",
　　　　　　　　　　dataType: 'json',
　　　　　　　　　　success: function(result) {
　　　　　　　　　　　　$(result.d).each(function() {
　　　　　　　　　　　　　　//alert(this);
　　　　　　　　　　　　　　$('#dictionary').append(this['ID'] + " " + this['Value']);
　　　　　　　　　　　　　　//alert(result.d.join(" | "));
　　　　　　　　　　　　});
　　　　　　　　　　}
　　　　　　　　});
　　　　　　});
　　　　});
　　　　//返回DataSet(XML)
　　　　$(document).ready(function() {
　　　　　　$('#btn5').click(function() {
　　　　　　　　$.ajax({
　　　　　　　　　　type: "POST",
　　　　　　　　　　url: "WebService1.asmx/GetDataSet",
　　　　　　　　　　data: "{}",
　　　　　　　　　　dataType: 'xml', //返回的類型為XML ，和前面的Json，不一樣了
　　　　　　　　　　success: function(result) {
　　　　　　　　　　//示範一下捕獲
　　　　　　　　　　　　try {　
　　　　　　　　　　　　　　$(result).find("Table1").each(function() {
　　　　　　　　　　　　　　　　$('#dictionary').append($(this).find("ID").text() + " " + $(this).find("Value").text());
　　　　　　　　　　　　　　});
　　　　　　　　　　　　}
　　　　　　　　　　　　catch (e) {
　　　　　　　　　　　　　　alert(e);
　　　　　　　　　　　　　　return;
　　　　　　　　　　　　}
　　　　　　　　　　},
　　　　　　　　　　error: function(result, status) { //如果沒有上面的捕獲出錯會執行這裡的回呼函數
　　　　　　　　　　　　if (status == 'error') {
　　　　　　　　　　　　　　alert(status);
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　});
　　　　　　});
　　　　});
　　　　//Ajax 為使用者提供反饋，利用ajaxStart和ajaxStop 方法，示範ajax跟蹤相關事件的回調，他們兩個方法可以添加給jQuery對象在Ajax前後回調
　　　　//但對與Ajax的監控，本身是全域性的
　　　　$(document).ready(function() {
　　　　　　$('#loading').ajaxStart(function() {
　　　　　　　　$(this).show();
　　　　　　}).ajaxStop(function() {
　　　　　　　　$(this).hide();
　　　　　　});
　　　　});
　　　　// 滑鼠移入移出效果，多個元素的時候，可以使用“，”隔開
　　　　$(document).ready(function() {
　　　　　　$('div.button').hover(function() {
　　　　　　　　$(this).addClass('hover');
　　　　　　}, function() {
　　　　　　　　$(this).removeClass('hover');
　　　　　　});
　　　　});

　　</script>
</head>
<body>
　　<form id="form1" runat="server">
　　<div id="switcher">
　　　　<h2>
　　　　　　jQuery 的WebServices 調用</h2>
　　　　<div class="button" id="btn1">
　　　　　　HelloWorld</div>
　　　　<div class="button" id="btn2">
　　　　　　傳入參數</div>
　　　　<div class="button" id="btn3">
　　　　　　返回集合</div>
　　　　<div class="button" id="btn4">
　　　　　　返回複合類型</div>
　　　　<div class="button" id="btn5">
　　　　　　返回DataSet(XML)</div>
　　</div>
　　<div id="loading">
　　　　伺服器處理中，請稍後。
　　</div>
　　<div id="dictionary">
　　</div>
　　</form>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More