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

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

WBOY
WBOY원래의
2016-05-16 17:55:371306검색

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




    실행 결과 차트:



    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.