Json 데이터의 Jquery Ajax 비동기 처리에 대해 자세히 설명합니다._jquery

소위 Ajax라는 두 가지 방법에 대해 이야기합니다.
방법 1: (Microsoft는 자체 Ajax 프레임워크를 가지고 있습니다.)
Asp.net에서는 Microsoft가 자체 Ajax 프레임워크를 사용하는 페이지를 소개합니다. background.cs 파일 .Web.Services 공간을 확보한 후 정적 메서드를 정의합니다(메서드 앞에 [WebMethod] 추가)
[WebMethod]
public static string ABC(string ABC)
{
return ABC;
}
자, 이제 프런트 엔드 J가 백그라운드에서 반환된 데이터를 처리하는 방법에 대해 이야기하겠습니다. Jquery를 사용하여 반환된 순수 html, json, Xml 및 기타 데이터를 처리할 수 있습니다. 반환된 데이터에는 문자열, 컬렉션(List<>), 클래스가 포함됩니다.
하지만 모두 Json 형식을 반환합니다(Json은 XML보다 가볍고 처리하기 쉽습니다).
코드를 살펴보겠습니다.
프런트 페이지:

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

<%@ 페이지 언어="C#" AutoEventWireup="true" CodeFile ="Default2.aspx.cs" Inherits="Default2" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



> /head>

사전

백엔드 cs 파일




코드 복사


코드는 다음과 같습니다.

시스템 사용;
System.Collections 사용;
System.Collections.Generic 사용;
System.Configuration 사용;
System.Data 사용;
System.Linq 사용;
System.Web 사용;
System.Web.Security 사용;
System.Web.UI 사용;
System.Web.UI.HtmlControls 사용;
System.Web.UI.WebControls 사용;
System.Web.UI.WebControls.WebParts 사용;
System.Web.Services 사용;
공개 부분 클래스 Default2 : System.Web.UI.Page
{
protected void Page_Load(객체 전송자, EventArgs e)
{
}
[WebMethod]
public 정적 문자열 HelloWorld()
{
return "123--->456";
}
[WebMethod]
공개 정적 문자열 ABC(문자열 ABC)
{
return ABC;
}
[WebMethod]
공개 정적 문자열 GetWish(문자열 값1, 문자열 값2, 문자열 값3, int 값4)
{
return string.Format("祝您재{3}年里 {0}、{1}、{2}", 값1, 값2, 값3, 값4);
}
/// <요약>
/// 返回集합
///
///
/// <반품>
[WebMethod]
공개 정적 목록 GetArray(int i)
{
목록 list = new List();
while (i >= 0)
{
list.Add(i--);
}
반품 목록;
}
/// <요약>
/// 返回一个复합类型
///
/// <반품>
[WebMethod]
public static Class1 GetClass()
{
return new Class1 { ID = "1", Value = "牛年大吉" };
}
공용 클래스 Class1
{
공용 문자열 ID { get; 세트; }
공개 문자열 값 { get; 세트; }
}
}

利用 Jquery让返回的各类数据(string、集合(List<>)、类)以Json数据格式返回,为什么要用결과 .d
Json을 사용하여 Json을 다운로드하세요.
Json이 Javascript를 실행합니다.
　Json형式一: javascript对象 { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }
Json형형式一: javascript数组 [{ "firstName": " Brett", "lastName":"McLaughlin", "email": "aaaa" },
{ "firstName": "Jason", "lastName":"Hunterwang", "email": "bbbb"}]
当然javascript는 Js数组或Js对象.那微象의 Ajax에 맞는 "Brett"을 사용합니다.种shape式呢.是第一种.

FireFox의 인기 목록

방법은 사용하지 않습니다. 일대일 사용 방법은 더 많습니다.

방법 방법:(建一个一般处理程序即.ashx文件)

사용 방법 방법은 一般是我们要에서 ashx文件里 Hand动写好返回的Json格式的数据返回给前台用

ashx 你可以配成Json格式一或Json格式two

Default.aspx면Js代码如下




复aze代码

代码如下: $.ajax({ type: "POST",

url: "Handler.ashx",

dataType: "json",
success: function(data){
alert(data.name); //返回的为 Json格式一(Js对象)
/* 返回的为 Json格式two(Js对象)
$(data).each(function(i) {
alert(data[i].name);
})
*/
}
});


Handler.ashx 代码如下

复system代码

代码如下: <%@ WebHandler Language="C#" Class="Handler" %> 시스템 사용;

System.Web 사용;

System.Collections 사용;
System.Collections.Generic 사용;
System.Web.Script.Serialization 사용;
public class Handler : IHttpHandler {
public void ProcessRequest(HttpContext 컨텍스트) {
JavaScriptSerializer jss = new JavaScriptSerializer();
context.Response.ContentType = "텍스트/일반";
// 返回的为Json格式一 Js对象
string data = "{"name":"wang","age":25}";
// 返回的为Json格式two Js数组
//string data = "[{"name":"wang","age":25},{"name":"zhang","age ":22}]";
context.Response.Write(데이터);
}
public bool IsReusable {
get {
return false;
}
}
}


위의 방법은 기본적으로 두 번째 방법입니다. 어떤 사람들은 문자열을 철자하는 것을 좋아하지 않을 수 있습니다. 그렇다면 좋은 방법은 무엇입니까?
예를 들어 설명하겠습니다. Handler.ashx를 변경하면 됩니다.
Handler.ashx 코드는 다음과 같습니다

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

<%@ WebHandler Language="C#" Class="Handler" %>
System.Web 사용
System.Collections 사용; using System.Collections.Generic; // 키-값 수집에 필요한 Dictionary
using System.Web.Script.Serialization; //JavaScriptSerializer 클래스에 필요
public class Handler {
public void ProcessRequest (HttpContext context) {
JavaScriptSerializer jss = new JavaScriptSerializer()
context.Response.ContentType = "text/plain";
Dictionary string>( );
drow.Add("name", "Wang")
drow.Add("age", "24")
context.Response.Write(jss.Serialize( drow))
public bool IsReusable {
get {
return false
}
}


ASP의 JavaScriptSerializer .Net

jss.Serialize(drow)는 drow의 Dictionary(키와 값의 모음) 데이터 유형을 Json 데이터 형식으로 변환하는 것입니다

디버깅 결과는 아래와 같습니다. (위 예시에서는 Json 형태의 JS 객체인 key-value 다중 집합을 출력합니다.)




Json 양식 2(Js 배열)를 출력하려면 일부만 변경하면 되나요?

Handler.ashx 코드는 다음과 같습니다

코드 복사

코드는 다음과 같습니다 <%@ WebHandler Language="C#" Class="Handler" %> System.Web 사용

System.Collections 사용; System.Collections.Generic;

System.Web.Script.Serialization 사용;
public class Handler: IHttpHandler {
public void ProcessRequest(HttpContext 컨텍스트) {
JavaScriptSerializer jss = new JavaScriptSerializer(); 🎜>context.ContentType = "text/plain";
List> _list = new List>(); string> drow = new Dictionary()
drow.Add("name", "Wang")
drow.Add("age", "24"); ;string, string> drow1 = 새 사전drow1.Add("name", "Zhang")
drow1.Add("age", "35"); 🎜>_list.Add(drow);
context.Response.Write(jss.Serialize(_list))
}
public bool IsReusable get {
return false
}
}
}






디버깅 결과는 아래와 같습니다. (
위 예시는 Json form 2를 출력하는 Js 배열입니다
)

기본 개념은 여기에서 거의 다룹니다. 자주 접하는 또 다른 예는 DataTabel을 첫 페이지에서 호출할 수 있도록 Json 형식으로 변환하는 방법입니다. Handler.ashx

코드 복사

코드는 다음과 같습니다.

///

/// DataTable을 Json으로 ///

/// < ;/param>
///

비공개 문자열 Dtb2Json(DataTable dtb) { JavaScriptSerializer jss = new JavaScriptSerializer(); ArrayList dic = new ArrayList() foreach(dtb.Rows의 DataRow 행) { Dictionary drow = new Dictionary(); dtb.Columns의 DataColumn col) {

drow.Add(col.ColumnName, row[col.ColumnName])

}
dic.Add(drow)
return jss .Serialize(dic)
}


실제로 Json 형식을 DataTabel 형식으로 변환하는 방법도 있습니다.

코드를 복사하세요 코드는 다음과 같습니다.

///

/// Json에서 DataTable로
///

/// < ;param name="json">///
private DataTable Json2Dtb(string json)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = jss.Deserialize< ;ArrayList>(json);
DataTable dtb = new DataTable()
if (dic.Count > 0)
{
foreach (Dictionary drow in dic)
{
if (dtb.Columns.Count == 0)
{
foreach(drow.Keys의 문자열 키)
{
dtb.Columns.Add(key, drow[ key].GetType());
}
}
DataRow row = dtb.NewRow()
foreach(drow의 문자열 키) .Keys)
{
row[key ] = drow[key];
dtb.Rows.Add(row)
}
}
return dtb;
}


반환된 Json을 테이블 형식으로 표시하도록 합니다.

그러면 JS 첫 페이지는 다음과 같습니다

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

$.ajax({

type: "POST",
url: "Handler .ashx",
dataType: "json",
성공: function(data) {
var table = $("");
for (var i = 0; i < data.length; i ) {
o1 = data[i]
var row = $("") ;
for (o1의 키)
{
var td = $( "")
td.text(o1[key].toString() );
td.appendTo(row);}
row.appendTo(table) ;
}
table.appendTo($("#back"))
}
});


위의 예를 기반으로 두 가지 추가 Js 지식 포인트

1. Json에서 데이터를 검색하기 전에 배열을 반환한 경우 data[i].name을 사용했습니다. data[i]["name"]
으로 표현할 수도 있습니다. 2. Js 객체에 액세스하려는 경우

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

success: function( data){

$(data).each(function(i ) {
for(key in this) // Js 객체의 모든 속성을 탐색합니다.
alert(data[i][key])//data[i].key로 변경할 수 없습니다. 여기서는 키가 위의 키 변수 대신 속성이 됩니다.
})
}


프런트엔드 Json 데이터도 백그라운드로 전달된 후 구문 분석됩니다. into DataTabel
여기에서는 DataTabel을 Json으로 부드럽게 하고 Json을 DataTabel로 변환합니다. 다운로드 주소는 다음과 같습니다.

소스 코드 다운로드

asp.net에 관심이 있는 경우 직렬화와 역직렬화에 관심이 있고 알아보고 싶은 경우

성명：

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