jQuery AJax呼叫asp.net webservers的實作程式碼-js教程-PHP中文網

首頁

web前端

js教程

jQuery AJax呼叫asp.net webservers的實作程式碼

高洛峰

Jan 12, 2017 pm 02:23 PM

aspx頁面程式碼

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head 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; 
} 
　　 
--></style><style type="text/css" bogus="1"><!-- 
.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; 
} 
　　 
--></style><style type="text/css" bogus="1" bogus="1">.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; 
} 
　　</style> 
　　<script type="text/javascript"><!-- 
　　　　//无参数调用 
　　　　$(document).ready(function() { 
　　　　　　$(&#39;#btn1&#39;).click(function() { 
　　　　　　　　$.ajax({ 
　　　　　　　　　　type: "POST",　 //访问WebService使用Post方式请求 
　　　　　　　　　　contentType: "application/json", //WebService 会返回Json类型 
　　　　　　　　　　url: "WebService1.asmx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名 
　　　　　　　　　　data: "{}",　　　　 //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到　　　 
　　　　　　　　　　dataType: &#39;json&#39;, 
　　　　　　　　　　success: function(result) {　　 //回调函数，result，返回值 
　　　　　　　　　　　　$(&#39;#dictionary&#39;).append(result.d); 
　　　　　　　　　　} 
　　　　　　　　}); 
　　　　　　}); 
　　　　}); 
　　　　//有参数调用 
　　　　$(document).ready(function() { 
　　　　　　$("#btn2").click(function() { 
　　　　　　　　$.ajax({ 
　　　　　　　　　　type: "POST", 
　　　　　　　　　　contentType: "application/json", 
　　　　　　　　　　url: "WebService1.asmx/GetWish", 
　　　　　　　　　　data: "{value1:&#39;心想事成&#39;,value2:&#39;万事如意&#39;,value3:&#39;牛牛牛&#39;,value4:2009}", 
　　　　　　　　　　dataType: &#39;json&#39;, 
　　　　　　　　　　success: function(result) { 
　　　　　　　　　　　　$(&#39;#dictionary&#39;).append(result.d); 
　　　　　　　　　　} 
　　　　　　　　}); 
　　　　　　}); 
　　　　}); 
　　　　 
　　　　 
　　　　//返回集合（引用自网络，很说明问题） 
　　　　$(document).ready(function() { 
　　　　　　$("#btn3").click(function() { 
　　　　　　　　$.ajax({ 
　　　　　　　　　　type: "POST", 
　　　　　　　　　　contentType: "application/json", 
　　　　　　　　　　url: "WebService1.asmx/GetArray", 
　　　　　　　　　　data: "{i:10}", 
　　　　　　　　　　dataType: &#39;json&#39;, 
　　　　　　　　　　success: function(result) { 
　　　　　　　　　　　　$(result.d).each(function() { 
　　　　　　　　　　　　　　//alert(this); 
　　　　　　　　　　　　　　$(&#39;#dictionary&#39;).append(this.toString() + " "); 
　　　　　　　　　　　　　　//alert(result.d.join(" | ")); 
　　　　　　　　　　　　}); 
　　　　　　　　　　} 
　　　　　　　　}); 
　　　　　　}); 
　　　　}); 
　　　　//返回复合类型 
　　　　$(document).ready(function() { 
　　　　　　$(&#39;#btn4&#39;).click(function() { 
　　　　　　　　$.ajax({ 
　　　　　　　　　　type: "POST", 
　　　　　　　　　　contentType: "application/json", 
　　　　　　　　　　url: "WebService1.asmx/GetClass", 
　　　　　　　　　　data: "{}", 
　　　　　　　　　　dataType: &#39;json&#39;, 
　　　　　　　　　　success: function(result) { 
　　　　　　　　　　　　$(result.d).each(function() { 
　　　　　　　　　　　　　　//alert(this); 
　　　　　　　　　　　　　　$(&#39;#dictionary&#39;).append(this[&#39;ID&#39;] + " " + this[&#39;Value&#39;]); 
　　　　　　　　　　　　　　//alert(result.d.join(" | ")); 
　　　　　　　　　　　　}); 
　　　　　　　　　　} 
　　　　　　　　}); 
　　　　　　}); 
　　　　}); 
　　　　//返回DataSet(XML) 
　　　　$(document).ready(function() { 
　　　　　　$(&#39;#btn5&#39;).click(function() { 
　　　　　　　　$.ajax({ 
　　　　　　　　　　type: "POST", 
　　　　　　　　　　url: "WebService1.asmx/GetDataSet", 
　　　　　　　　　　data: "{}", 
　　　　　　　　　　dataType: &#39;xml&#39;, //返回的类型为XML ，和前面的Json，不一样了 
　　　　　　　　　　success: function(result) { 
　　　　　　　　　　//演示一下捕获 
　　　　　　　　　　　　try {　 
　　　　　　　　　　　　　　$(result).find("Table1").each(function() { 
　　　　　　　　　　　　　　　　$(&#39;#dictionary&#39;).append($(this).find("ID").text() + " " + $(this).find("Value").text()); 
　　　　　　　　　　　　　　}); 
　　　　　　　　　　　　} 
　　　　　　　　　　　　catch (e) { 
　　　　　　　　　　　　　　alert(e); 
　　　　　　　　　　　　　　return; 
　　　　　　　　　　　　} 
　　　　　　　　　　}, 
　　　　　　　　　　error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数 
　　　　　　　　　　　　if (status == &#39;error&#39;) { 
　　　　　　　　　　　　　　alert(status); 
　　　　　　　　　　　　} 
　　　　　　　　　　} 
　　　　　　　　}); 
　　　　　　}); 
　　　　}); 
　　　　//Ajax 为用户提供反馈，利用ajaxStart和ajaxStop 方法，演示ajax跟踪相关事件的回调，他们两个方法可以添加给jQuery对象在Ajax前后回调 
　　　　//但对与Ajax的监控，本身是全局性的 
　　　　$(document).ready(function() { 
　　　　　　$(&#39;#loading&#39;).ajaxStart(function() { 
　　　　　　　　$(this).show(); 
　　　　　　}).ajaxStop(function() { 
　　　　　　　　$(this).hide(); 
　　　　　　}); 
　　　　}); 
　　　　// 鼠标移入移出效果，多个元素的时候，可以使用“，”隔开 
　　　　$(document).ready(function() { 
　　　　　　$(&#39;div.button&#39;).hover(function() { 
　　　　　　　　$(this).addClass(&#39;hover&#39;); 
　　　　　　}, function() { 
　　　　　　　　$(this).removeClass(&#39;hover&#39;); 
　　　　　　}); 
　　　　}); 
　　　　 
　　　　 
　　 
// --></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>

WebService1.asmx 程式碼

using System; 
using System.Collections; 
using System.ComponentModel; 
using System.Data; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 
using System.Web.Services.Protocols; 
using System.Xml.Linq; 
using System.Collections.Generic; 
namespace jquery_Learning 
{ 
/// <summary> 
/// WebService1 的摘要说明 
/// </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 WebService1 : System.Web.Services.WebService 
{ 
/// <summary> 
/// 无参数 
/// </summary> 
/// <returns></returns> 
[WebMethod] 
public string HelloWorld() 
{ 
return "Hello World "; 
} 
/// <summary> 
/// 带参数 
/// </summary> 
/// <param name="value1"></param> 
/// <param name="value2"></param> 
/// <param name="value3"></param> 
/// <param name="value4"></param> 
/// <returns></returns> 
[WebMethod] 
public string GetWish(string value1, string value2, string value3, int value4) 
{ 
return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4); 
} 
/// <summary> 
/// 返回集合 
/// </summary> 
/// <param name="i"></param> 
/// <returns></returns> 
[WebMethod] 
public List<int> GetArray(int i) 
{ 
List<int> list = new List<int>(); 
while (i >= 0) 
{ 
list.Add(i--); 
} 
return list; 
} 
/// <summary> 
/// 返回一个复合类型 
/// </summary> 
/// <returns></returns> 
[WebMethod] 
public Class1 GetClass() 
{ 
return new Class1 { ID = "1", Value = "牛年大吉" }; 
} 
/// <summary> 
/// 返回XML 
/// </summary> 
/// <returns></returns> 
[WebMethod] 
public DataSet GetDataSet() 
{ 
DataSet ds = new DataSet(); 
DataTable dt = new DataTable(); 
dt.Columns.Add("ID", Type.GetType("System.String")); 
dt.Columns.Add("Value", Type.GetType("System.String")); 
DataRow dr = dt.NewRow(); 
dr["ID"] = "1"; 
dr["Value"] = "新年快乐"; 
dt.Rows.Add(dr); 
dr = dt.NewRow(); 
dr["ID"] = "2"; 
dr["Value"] = "万事如意"; 
dt.Rows.Add(dr); 
ds.Tables.Add(dt); 
return ds; 
} 
} 
//自定义的类，只有两个属性 
public class Class1 
{ 
public string ID { get; set; } 
public string Value { get; set; } 
} 
}

更多jQuery AJax呼叫asp.net webservers的實作程式碼相關文章請關注PHP中文網！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。