Jquery 비동기 요청 데이터 예제 code_jquery

1. Jquery는 aspx 페이지
프론트 페이지 JS 코드에서 데이터를 요청합니다.

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

$("#Button1").bind("click", function () {
$.ajax({
type: "post",
url: "default .aspx",
데이터: "name=" $("#Text1").val(),
성공: 함수(결과) {
alert(result.msg);
}
}) ;
});

코드 복사 🎜>

백엔드 cs 코드:

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

protected void Page_Load(객체 전송자, EventArgs e)
{
if (Request["name"]!=null)
{
Response.ContentType = "text /json";
Response.Write ("{"msg":"" Request["name"] ""}");//데이터를 Json에 넣습니다
Response.End();
}
}

2. Jquery는 WebService 페이지에서 데이터를 요청합니다.

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

$("#Button2").bind("click", function () {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService.asmx/HelloWorld",
data: "{name:'" $("#Text1").val() "'}" ,
데이터 유형: "json",
성공: 함수(결과) {
alert(result.d)
}
}); ;input id="Button2" type="button" value=" WebService에 제출" />


WebService 코드

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

using System.Collections.Generic;

using System.Linq; .Web;
System.Web.Services 사용;//

/// WebService에 대한 요약 설명
///
[WebService( Namespace = "http://tempuri.org/")]
[ WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// ASP.NET AJAX를 사용하여 스크립트에서 이 웹 서비스를 호출할 수 있도록 하려면 주석 처리를 제거하세요.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
public WebService () {
//다음 줄의 주석 처리를 취소하세요. 설계된 구성요소를 사용하는 경우
//InitializeComponent();
}
[WebMethod]
public string HelloWorld( string name) {
return "Hello World" name; >}


3. Jquery는 ashx에서 데이터를 요청합니다.
페이지와 동일한 Js 코드:

코드 복사


코드는 다음과 같습니다.

$( "#Button3").bind("click", function () { $.ajax({ 유형: "post", url: "Handler.ashx", data: " name=" $("#Text1").val(),

성공: 함수(결과) {

alert(result.msg);
}
});
}) ;


백엔드 코드:



코드 복사

코드는 다음과 같습니다.

<%@ WebHandler Language="C#" Class="Handler" %> ; System.Web 사용; 공용 클래스 핸들러: IHttpHandler { public void ProcessRequest(HttpContext 컨텍스트) { context.Response.ContentType = "text/json" context.Response .Write("{"msg":"Hello World" context.Request["name"] "from handler.ashx "}")

context.Response.End()

}
공개 bool IsReusable {
get {
return false
}
}
}



코드 다운로드