jQuery의 ajax 사용 시나리오 토론(c#)_jquery

1: jQuery.ajax 구문 기본

jQuery.ajax([옵션])

개요: HTTP 요청을 통해 원격 데이터를 로드합니다.

jQuery 하위 수준 AJAX 구현. 간단하고 사용하기 쉬운 상위 수준 구현을 보려면 $.get, $.post 등을 참조하세요. $.ajax()는 생성된 XMLHttpRequest 객체를 반환합니다. 이 방법을 사용하면 더 많은 유연성을 얻을 수 있습니다.

데이터 유형
$.ajax() 함수는 서버에서 제공하는 정보를 사용하여 반환된 데이터를 처리합니다. dataType 옵션을 통해 다양한 데이터 처리 방법을 지정할 수도 있습니다. 그 중 text, xml 형식으로 반환되는 데이터는 처리되지 않습니다. html 유형으로 지정하면 HTML이 문자열로 반환되기 전에 포함된 모든 JavaScript가 실행됩니다. json 형태로 지정하면 획득한 데이터를 자바스크립트 객체로 파싱하고 생성된 객체를 결과로 반환한다. 서버에 데이터를 보내기 위해 Ajax 요청은 기본적으로 GET 메서드를 사용합니다. POST 메소드를 사용하려면 type 매개변수 값을 설정하면 됩니다. 이 옵션은 데이터 옵션의 콘텐츠가 서버로 전송되는 방식에도 영향을 줍니다.

사용 시나리오 1:
설명: 서버에 데이터를 저장하고 성공하면 정보를 표시합니다. jQuery 코드:
$.ajax({
유형: "POST",
url: "some.php",
데이터: "name=John&location=Boston",
성공: 함수 (msg){
Alert( "저장된 데이터: " msg );
}
});

사용 시나리오 2:
설명: HTML 웹 페이지의 최신 버전을 로드합니다. jQuery 코드:
$.ajax({
url: "test.html",
캐시: false,
성공: function(html){
$("#results"). 추가(html);
}
});

load(url, [data], [callback])
개요: 원격 HTML 파일 코드를 로드하고 DOM에 삽입합니다.
기본적으로 GET 메서드가 사용되며, 추가 매개변수를 전달하면 자동으로 POST 메서드로 변환됩니다.

사용 시나리오 1:
설명: Feeds.html 파일의 콘텐츠를 로드합니다. jQuery 코드:
$("#feeds").load("feeds.html");

jQuery.get(url, [data], [callback], [type]) 및 jQuery.post(url, [data], [callback], [type])

개요: 원격 HTTP GET 또는 POST 요청을 통해 정보를 로드합니다.
복잡한 $.ajax를 대체하는 간단한 GET 또는 POST 요청 함수입니다. 요청이 성공하면 콜백 함수를 호출할 수 있습니다. 오류 발생 시 함수를 실행해야 하는 경우 $.ajax를 사용하세요.
설명: test.aspx 반환 값(반환 값에 따라 HTML 또는 XML)을 표시하고 요청 매개 변수 집합을 추가합니다. jQuery 코드:
$.get("test.aspx", { 이름: "John", 시간: "오후 2시" },
function(data){
Alert("데이터 로드됨: " data) ;
});
$.post("test.aspx", { 이름: "John", 시간: "오후 2시" },
function(data){
Alert("데이터 로드됨 : " 데이터);
});

위는 기본 구문입니다. 이미 익숙하다면 위의 방법과 사용 시나리오를 단계별로 자세히 논의해 보겠습니다.

2: ASP.NET을 사용한 jQuery.ajax 실습

먼저 요청 시작 페이지로 Default.aspx 페이지를 만들고 반환 값을 가져옵니다. Default.aspx 페이지의 코드는 다음과 같습니다.

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

환//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">







< ;/input>
;

ajax:

id="load">load: "get">get:
;/ul>
 

Default.aspx.cs에 작성된 코드가 없으면 기본값이면 충분합니다.

요청 수신자에는 response.aspx 페이지, test.htm 정적 페이지, TextJson.txt라는 세 가지 역할이 있습니다.

response.aspx 페이지: 주로 서버측에서 클라이언트가 제출한 데이터를 가져와 클라이언트에 반환합니다. test.htm 정적 페이지: 주로 클라이언트용 HTML 웹 페이지의 최신 버전을 부분적으로 로드하는 데 사용됩니다.

TextJson.txt: 파일에 데이터로 저장되며 클라이언트가 비동기적으로 액세스할 수 있도록 합니다.

response.aspx 페이지 코드, response.aspx는 다음과 같습니다.

html 코드가 없습니다. 주된 목적은 서버측에서 클라이언트가 제출한 데이터를 얻어서 클라이언트에 데이터를 반환하는 것이기 때문입니다. html 콘텐츠를 표시할 필요가 없으므로 html 태그가 포함되어 있지 않습니다. .

response.aspx.cs 페이지 코드:

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

System 사용;

System.Collections.Generic 사용;
System.Linq 사용;
System.Web 사용;
System.Web.UI 사용;
System.Web.UI 사용 .WebControls;
System.Runtime.Serialization.Json 사용;
System.Runtime.Serialization 사용;

네임스페이스 JqueryAjax2{

공개 부분 클래스 응답: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string str = Request["key1"];
          Response.Write("success" str); 클라이언트가 제출한 데이터를 가져와서 클라이언트에 반환하는 방법입니다.

test.htm 정적 페이지의 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

< ;html xmlns="http://www.w3.org/1999/xhtml" > < ;/head>

test.html

정적 페이지를 요청하면 html 형식으로 클라이언트에 반환됩니다. $("#resulthtml").append(html)를 사용하여 test.htm 정적 페이지의 내용을 표시합니다.

TextJson.txt에는 json 형식의 텍스트가 포함되어 있습니다.

{ "key1": "Liu Mingfeng", "key2": "Lin Wang", "key3": "Chen Wenjie", "key4": "Geng Dianjia" }

액세스 후 반환되는 데이터는 json 형식이며 클라이언트가 json을 얻은 후 자동으로 개체로 변환됩니다.

좋아, jQuery의 비동기 사용 시나리오는 기본적으로 우리의 요구 사항을 충족합니다. 직접 시도해 보겠습니다.