jQuery AJAX는 페이지 배경 메소드 및 웹 서비스 정의 호출을 위한 메소드 공유를 구현합니다.-JS 튜토리얼-php.cn

jQuery AJAX는 페이지 배경 메소드 및 웹 서비스 정의 호출을 위한 메소드 공유를 구현합니다.

WBOY

풀어 주다： 2016-05-16 17:55:37

원래의

1338명이 탐색했습니다.

1. 새 데모.aspx 페이지를 만듭니다.
2. 먼저 페이지의 배경 파일 decos.aspx.cs에 대한 참조를 추가합니다.

System.Web.Services 사용
3. 매개변수 없는 메서드 호출. 이 버전은 .net Framework 2.0보다 낮을 수 없습니다.
백엔드 코드:

코드 복사 코드는 다음과 같습니다.

 
[WebMethod] 
 공개 정적 문자열 SayHello() 
{ 
return "Hello Ajax!" 
} 

JS 코드:

코드 복사 코드는 다음과 같습니다.

 
$(function() { 
$("#btnOK").click(function () { 
 $.ajax({ 
//post 메소드를 사용하려면
type: "Post", 
//메소드가 있는 페이지와 메소드 이름
url : "Demo.aspx/SayHello", 
 contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function(data) { 
// 반환된 데이터는 data.d를 사용하여 콘텐츠
 Alert(data.d); 
}, 
error: function(err) { 
alert(err) 
});//제출 버튼 비활성화
}) 
}) 

 
페이지 코드: 

코드 복사

코드는 다음과 같습니다.

 ; 

 
3. 매개변수를 사용한 메소드 호출 
백엔드 코드: 

코드 복사

[WebMethod] public static string GetStr(string str, string str2) {

return str str2; >

JS 코드: 

코드 복사

코드는 다음과 같습니다.

$( function() { $("#btnOK").click(function() { $.ajax({ type: "Post", url: "demo.aspx/GetStr" , //메서드 매개변수는 올바르게 작성되어야 합니다. str은 형식 매개변수의 이름이고, str2는 두 번째 형식 매개변수의 이름입니다.

data: "{'str':'I am','str2 ':'XXX'}",

contentType: "application/json; charset=utf-8 ", 
dataType: "json", 
success: function(data) { 
//The 반환된 데이터는 data.d 
alert(data.d); 
}, 
error: function(err) { 
alert(err) 
} 
}) ; 

//버튼 제출 비활성화 
return false; 
}) 

 
작동 효과는 다음과 같습니다.





4. 반환 배열 방식 
백엔드 코드: 

코드 복사

코드는 다음과 같습니다.

[WebMethod]

public static List GetArray() { List li = new List() i = 0 ; i < 10; i ) return li

 
 >

코드 복사

 코드는 다음과 같습니다.

$(function() {

$( "#btnOK"). click(function() {
$.ajax({
type: "Post",

url: "demo.aspx/GetArray", contentType: "application/ json; charset=utf- 8", dataType: "json", success: function(data) { //삽입하기 전에 ul 지우기 $("#list").html( "");

//재귀적으로 데이터 가져오기

$(data.d).each(function() { 
//결과를 li에 삽입
$("#list" ).append(" " this "
") 
}) 

alert(data.d) 
}, 
오류: 함수 (err) { 
alert(err); 
} 
}) 

//버튼 제출 비활성화 
return false 
}) ; 




실행 결과 차트: 