Detailed discussion on Jquery Ajax asynchronous processing of Json data.-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed discussion on Jquery Ajax asynchronous processing of Json data.

高洛峰

Jan 12, 2017 am 10:14 AM

So-called Ajax. Here we talk about two methods
Method 1: (Microsoft has its own Ajax framework)
In Asp.net, Microsoft has its own Ajax framework. It is in the page background .cs file Introduce the using System.Web.Services space and define a static method (add [WebMethod] before the method)
[WebMethod]
public static string ABC(string ABC)
{
return ABC;
}
Okay, now let’s talk about how the front-end Js handles the data returned by the background. You can use Jquery to process the returned pure html, json, Xml and other data. Here we demonstrate that the returned data includes string, collection (List< ;>), class.
But all return Json format (Json is lightweight and easier to process than XML). See how the frontend parses these data.
The code is as follows:
Frontend page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>无标题页</title> 
<style type="text/css"> 
.hover 
{ 
cursor: pointer; /*小手*/ 
background: #ffc; /*背景*/ 
} 
</style> 
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script> 
<script type="text/javascript"> 
//无参数调用 
$(document).ready(function() { 
$(&#39;#btn1&#39;).click(function() { 
$.ajax({ 
type: "POST", //访问WebService使用Post方式请求 
contentType: "application/json", 
url: "Default2.aspx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名 
data: "{}", //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到 
dataType: &#39;json&#39;, //WebService 会返回Json类型 
success: function(result) { //回调函数，result，返回值 
alert(result.d); 
} 
}); 
}); 
}); 
//有参数调用 
$(document).ready(function() { 
$("#btn2").click(function() { 
$.ajax({ 
type: "POST", 
contentType: "application/json", 
url: "Default2.aspx/GetWish", 
data: "{value1:&#39;心想事成&#39;,value2:&#39;万事如意&#39;,value3:&#39;牛牛牛&#39;,value4:2009}", 
dataType: &#39;json&#39;, 
success: function(result) { 
alert(result.d); 
} 
}); 
}); 
}); 
//返回集合（引用自网络，很说明问题） 
$(document).ready(function() { 
$("#btn3").click(function() { 
$.ajax({ 
type: "POST", 
contentType: "application/json", 
url: "Default2.aspx/GetArray", 
data: "{i:10}", 
dataType: &#39;json&#39;, 
success: function(result) { 
$(result.d).each(function() { 
alert(this); 
$(&#39;#dictionary&#39;).append(this.toString() + " "); 
//alert(result.d.join(" | ")); 
}); 
} 
}); 
}); 
}); 
//返回复合类型 
$(document).ready(function() { 
$(&#39;#btn4&#39;).click(function() { 
$.ajax({ 
type: "POST", 
contentType: "application/json", 
url: "Default2.aspx/GetClass", 
data: "{}", 
dataType: &#39;json&#39;, 
success: function(result) { 
$(result.d).each(function() { 
//alert(this); 
$(&#39;#dictionary&#39;).append(this[&#39;ID&#39;] + " " + this[&#39;Value&#39;]); 
//alert(result.d.join(" | ")); 
}); 
} 
}); 
}); 
}); 
//Ajax 为用户提供反馈，他们两个方法可以添加给jQuery对象在Ajax前后回调 
//但对与Ajax的监控，本身是全局性的 
$(document).ready(function() { 
$(&#39;#loading&#39;).ajaxStart(function() { 
$(this).show(); 
}).ajaxStop(function() { 
$(this).hide(); 
}); 
}); 
// 鼠标移入移出效果，多个元素的时候，可以使用“，”隔开 
$(document).ready(function() { 
$(&#39;btn&#39;).hover(function() { 
$(this).addClass(&#39;hover&#39;); 
}, function() { 
$(this).removeClass(&#39;hover&#39;); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="button" id="btn1" value="HelloWorld"/> 
<input type="button" id="btn2" value="传入参数"/> 
<input type="button" id="btn3" value="返回集合"/> 
<input type="button" id="btn4" value=" 返回复合类型"/> 
</div> 
<div id="dictionary">dictionary 
</div> 
</form> 
</body> 
</html>

Copy after login

Backend .cs file

using System; 
using System.Collections; 
using System.Collections.Generic; 
using System.Configuration; 
using System.Data; 
using System.Linq; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.HtmlControls; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.Services; 
public partial class Default2 : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
} 
[WebMethod] 
public static string HelloWorld() 
{ 
return "123--->456"; 
} 
[WebMethod] 
public static string ABC(string ABC) 
{ 
return ABC; 
} 
[WebMethod] 
public static string GetWish(string value1, string value2, string value3, int value4) 
{ 
return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4); 
} 
/// <summary> 
/// 返回集合 
/// </summary> 
/// <param name="i"></param> 
/// <returns></returns> 
[WebMethod] 
public static List<int> GetArray(int i) 
{ 
List<int> list = new List<int>(); 
while (i >= 0) 
{ 
list.Add(i--); 
} 
return list; 
} 
/// <summary> 
/// 返回一个复合类型 
/// </summary> 
/// <returns></returns> 
[WebMethod] 
public static Class1 GetClass() 
{ 
return new Class1 { ID = "1", Value = "牛年大吉" }; 
} 
public class Class1 
{ 
public string ID { get; set; } 
public string Value { get; set; } 
} 
}

Copy after login

Use Jquery to return various types of data (string, collection (List<>), class) in Json data format. Why use result. d
Here we will talk about Json
Json is simply a Javascript object or array.
Json form 1: javascript object { "firstName": "Brett", "lastName": "McLaughlin", "email ": "aaaa" }
Json form 2: javascript array [{ "firstName": "Brett", "lastName": "McLaughlin", "email": "aaaa" },
{ "firstName": "Jason", "lastName":"Hunterwang", "email": "bbbb"}]
Of course, javascript arrays and objects can be nested in each other. For example, "Brett" in form 1 can be replaced with a Js array or Js Object. So what form does Microsoft's Ajax return? It's the first one.
Microsoft framework returns a { "d": "Data returned by the background" } by default. Here we use the test in the above example to get something like
As in the above example, if the string type is returned, the Firefox debugging is as follows

Detailed discussion on Jquery Ajax asynchronous processing of Json data.

When the List<> type is returned, the Firefox debugging is as follows

Detailed discussion on Jquery Ajax asynchronous processing of Json data.

The returned data is also placed in the d attribute in the Js object, so this is why we always use result.d to get the data returned by the Microsoft framework.

Method 1 It is not commonly used. Method 2 is generally used more often.
Method 2: (Build a general processing program, i.e. .ashx file)
Using this method usually means that we have to manually write the returned Json in the ashx file. The data in the format is returned to the front desk for use
ashx You can configure it into Json format one or Json format two
Default.aspx page Js code is as follows

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

Copy after login

Handler.ashx code is as follows

<%@ WebHandler Language="C#" Class="Handler" %> 
using System; 
using System.Web; 
using System.Collections; 
using System.Collections.Generic; 
using System.Web.Script.Serialization; 
public class Handler : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
JavaScriptSerializer jss = new JavaScriptSerializer(); 
context.Response.ContentType = "text/plain"; 
// 返回的为Json格式一 Js对象 
string data = "{\"name\":\"wang\",\"age\":25}"; 
// 返回的为Json格式二 Js数组 
//string data = "[{\"name\":\"wang\",\"age\":25},{\"name\":\"zhang\",\"age\":22}]"; 
context.Response.Write(data); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

Copy after login

The above is basically the second method. Some people may not like to spell strings. So what is a good way? The answer is yes. Microsoft has good support for Json.
Taking the example, we only need to use Handler. Just change ashx.
Handler.ashx code is as follows

<%@ WebHandler Language="C#" Class="Handler" %> 
using System; 
using System.Web; 
using System.Collections; 
using System.Collections.Generic; // Dictionary<,> 键值对集合所需 
using System.Web.Script.Serialization; //JavaScriptSerializer 类所需 
public class Handler : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
JavaScriptSerializer jss = new JavaScriptSerializer(); 
context.Response.ContentType = "text/plain"; 
Dictionary<string, string> drow = new Dictionary<string, string>(); 
drow.Add("name", "Wang"); 
drow.Add("age", "24"); 
context.Response.Write(jss.Serialize(drow)); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

Copy after login

JavaScriptSerializer in ASP.Net provides us with a good method

jss.Serialize(drow) is to change drow The Dictionary (a collection of keys and values) data type is converted into Json data format

The debugging result is as shown below (the above example outputs a key-value multi-set, that is, a Js object in the form of Json )

Detailed discussion on Jquery Ajax asynchronous processing of Json data.

What if we want to output Json form 2 (Js array)? We only need to change part of it

Handler.ashx code is as follows

<%@ WebHandler Language="C#" Class="Handler" %> 
using System; 
using System.Web; 
using System.Collections; 
using System.Collections.Generic; 
using System.Web.Script.Serialization; 
public class Handler : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
JavaScriptSerializer jss = new JavaScriptSerializer(); 
context.Response.ContentType = "text/plain"; 
List<Dictionary<string, string>> _list = new List<Dictionary<string, string>>(); 
Dictionary<string, string> drow = new Dictionary<string, string>(); 
drow.Add("name", "Wang"); 
drow.Add("age", "24"); 
Dictionary<string, string> drow1 = new Dictionary<string, string>(); 
drow1.Add("name", "Zhang"); 
drow1.Add("age", "35"); 
_list.Add(drow); 
_list.Add(drow1); 
context.Response.Write(jss.Serialize(_list)); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

Copy after login

The debugging result is as shown below (the above example is a Js array that outputs Json form 2)

Detailed discussion on Jquery Ajax asynchronous processing of Json data.

The basic concepts are almost covered here. Here is another one A frequently encountered example is how to convert DataTabel into Json format so that it can be called by the front page.

is to write a method in Handler.ashx

/// <summary> 
/// DataTable转Json 
/// </summary> 
/// <param name="dtb"></param> 
/// <returns></returns> 
private string Dtb2Json(DataTable dtb) 
{ 
JavaScriptSerializer jss = new JavaScriptSerializer(); 
ArrayList dic = new ArrayList(); 
foreach (DataRow row in dtb.Rows) 
{ 
Dictionary<string, object> drow = new Dictionary<string, object>(); 
foreach (DataColumn col in dtb.Columns) 
{ 
drow.Add(col.ColumnName, row[col.ColumnName]); 
} 
dic.Add(drow); 
} 
return jss.Serialize(dic); 
}

Copy after login

In fact, there is also a way to convert Json format into DataTabel format, the method is as follows

/// <summary> 
/// Json转DataTable 
/// </summary> 
/// <param name="json"></param> 
/// <returns></returns> 
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<string, object> drow in dic) 
{ 
if (dtb.Columns.Count == 0) 
{ 
foreach (string key in drow.Keys) 
{ 
dtb.Columns.Add(key, drow[key].GetType()); 
} 
} 
DataRow row = dtb.NewRow(); 
foreach (string key in drow.Keys) 
{ 
row[key] = drow[key]; 
} 
dtb.Rows.Add(row); 
} 
} 
return dtb; 
}

Copy after login

We let the returned Json be displayed in the form of a table
Then the front page JS is as follows

$.ajax({ 
type: "POST", 
url: "Handler.ashx", 
dataType: "json", 
success: function(data){ 
var table = $("<table border=&#39;1&#39;></table>"); 
for (var i = 0; i < data.length; i++) { 
o1 = data[i]; 
var row = $("<tr></tr>"); 
for (key in o1) 
{ 
var td = $("<td></td>"); 
td.text(o1[key].toString()); 
td.appendTo(row);} 
row.appendTo(table); 
} 
table.appendTo($("#back")); 
} 
});

Copy after login

Let’s talk about two more Js knowledge points from the above example
1. Before we took the data in Json, if the returned array was data[i].name, it can also be expressed as data[i]["name"]
2. If you want to access all the Js objects Attributes then traverse the Js object.

success: function(data){ 
$(data).each(function(i) { 
for(key in this) // 遍历Js对象的所有属性 
alert(data[i][key]); 
//这里就不能换成 data[i].key 否则key成了属性而不是上面的key变量 
}); 
}

Copy after login

There is also a way to pass the front-end Json data to the background and parse it into a DataTabel

For more details on Jquery Ajax asynchronous processing of Json data. For related articles, please pay attention to the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7322

Java Tutorial

1625

CakePHP Tutorial

1350

Laravel Tutorial

1262

PHP Tutorial

1209

Related knowledge

Replace String Characters in JavaScript Mar 11, 2025 am 12:07 AM

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

Custom Google Search API Setup Tutorial Mar 04, 2025 am 01:06 AM

This tutorial shows you how to integrate a custom Google Search API into your blog or website, offering a more refined search experience than standard WordPress theme search functions. It's surprisingly easy! You'll be able to restrict searches to y

Build Your Own AJAX Web Applications Mar 09, 2025 am 12:11 AM

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

Example Colors JSON File Mar 03, 2025 am 12:35 AM

This article series was rewritten in mid 2017 with up-to-date information and fresh examples. In this JSON example, we will look at how we can store simple values in a file using JSON format. Using the key-value pair notation, we can store any kind

10 jQuery Syntax Highlighters Mar 02, 2025 am 12:32 AM

Enhance Your Code Presentation: 10 Syntax Highlighters for Developers Sharing code snippets on your website or blog is a common practice for developers. Choosing the right syntax highlighter can significantly improve readability and visual appeal. T

8 Stunning jQuery Page Layout Plugins Mar 06, 2025 am 12:48 AM

Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation

10 JavaScript & jQuery MVC Tutorials Mar 02, 2025 am 01:16 AM

This article presents a curated selection of over 10 tutorials on JavaScript and jQuery Model-View-Controller (MVC) frameworks, perfect for boosting your web development skills in the new year. These tutorials cover a range of topics, from foundatio

What is 'this' in JavaScript? Mar 04, 2025 am 01:15 AM

Core points This in JavaScript usually refers to an object that "owns" the method, but it depends on how the function is called. When there is no current object, this refers to the global object. In a web browser, it is represented by window. When calling a function, this maintains the global object; but when calling an object constructor or any of its methods, this refers to an instance of the object. You can change the context of this using methods such as call(), apply(), and bind(). These methods call the function using the given this value and parameters. JavaScript is an excellent programming language. A few years ago, this sentence was

See all articles