jQuery AJax ruft den Implementierungscode des asp.net-Webservers auf-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

jQuery AJax ruft den Implementierungscode des asp.net-Webservers auf

高洛峰

Jan 12, 2017 pm 02:23 PM

Aspx-Seitencode

<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>

Nach dem Login kopieren

WebService1.asmx-Code

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; } 
} 
}

Nach dem Login kopieren

Weitere Artikel zum Implementierungscode von jQuery AJax, der asp.net-Webserver aufruft, finden Sie unter PHP chinesische Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7465

CakePHP-Tutorial

1376

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Ersetzen Sie Stringzeichen in JavaScript Mar 11, 2025 am 12:07 AM

Detaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi

Wie erstelle ich meine eigenen JavaScript -Bibliotheken? Mar 18, 2025 pm 03:12 PM

In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.

Wie optimiere ich den JavaScript -Code für die Leistung im Browser? Mar 18, 2025 pm 03:14 PM

In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.

Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße? Apr 04, 2025 pm 02:42 PM

Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...

Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools? Mar 18, 2025 pm 03:16 PM

In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.

10 Möglichkeiten, Ihre JQuery -Leistung sofort zu erhöhen Mar 11, 2025 am 12:15 AM

Dieser Artikel beschreibt zehn einfache Schritte, um die Leistung Ihres Skripts erheblich zu steigern. Diese Techniken sind unkompliziert und für alle Fähigkeiten anwendbar. Bleiben Sie auf dem Laufenden: Verwenden Sie einen Paketmanager wie NPM mit einem Bundler wie Vite, um sicherzustellen

Verwenden Sie den Pass mit Folge und MySQL Mar 11, 2025 am 11:04 AM

FECKERIZE ist ein vielversprechender node.js orm. Es kann mit Postgresql, MySQL, Mariadb, SQLite und MSSQL verwendet werden. In diesem Tutorial werden wir die Authentifizierung für Benutzer einer Web -App implementieren. Und wir werden Passport verwenden, die beliebte Authentifizierung Middlew

So bauen Sie einen einfachen JQuery Slider Mar 11, 2025 am 12:19 AM

In diesem Artikel werden Sie mit der JQuery -Bibliothek ein einfaches Bildkarousel erstellen. Wir werden die BXSLIDER -Bibliothek verwenden, die auf JQuery basiert und viele Konfigurationsoptionen zum Einrichten des Karussells bietet. Heutzutage ist Picture Carousel zu einem Muss auf der Website geworden - ein Bild ist besser als tausend Wörter! Nachdem Sie sich entschieden haben, das Bild -Karussell zu verwenden, ist die nächste Frage, wie Sie es erstellen. Zunächst müssen Sie hochwertige, hochauflösende Bilder sammeln. Als nächstes müssen Sie ein Bildkarousel mit HTML und einem JavaScript -Code erstellen. Es gibt viele Bibliotheken im Web, die Ihnen helfen können, Karussell auf unterschiedliche Weise zu erstellen. Wir werden die Open -Source -BXSLIDER -Bibliothek verwenden. Die BXSLIDER -Bibliothek unterstützt reaktionsschnelles Design, sodass das mit dieser Bibliothek gebaute Karussell an alle angepasst werden kann

See all articles