Use Jquery to perform ajax and Analyze text/Json data-CSDN博客

本文链接：https://blog.csdn.net/envykok/article/details/5957236

Today we will have a example that how to use Jquery to perform ajax.

Here is the result:

the difference between section one and section two are process different type data return , one is flat text, one is json.

Code: (HTML)

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <mce:script src="http://code.jquery.com/jquery-1.4.3.min.js" mce_src="http://code.jquery.com/jquery-1.4.3.min.js" type="text/javascript"></mce:script> <mce:script src="JS/jquery.json-2.2.min.js" mce_src="JS/jquery.json-2.2.min.js" type="text/javascript"></mce:script> <mce:script language="javascript"></mce:script> </head> <body> <form id="form1" runat="server"> <div><b>SECTION ONE: (data is flat file)</b><br /><br /> <select name="country" οnchange="dynamic_Select('DatabaseCall.ashx', this.value)" /> <option value="#">-Select-</option> <option value="India">India</option> <option value="USA">USA</option> </select> <div id="txtResult"></div> </div> <hr /> <br /> <div><b>SECTION TWO: (data is json)</b><br /><br /> <select name="countryJson" οnchange="dynamic_Select_Json('JsonCall.ashx', this.value)" /> <option value="#">-Select-</option> <option value="India">India</option> <option value="USA">USA</option> </select> <div id="txtResultJson"></div> </div> </form> </body> </html>

Code : (C# - DatabaseCall.ashx)

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Net; using System.Web.Services; namespace AjaxSample { /// <summary> /// Summary description for $codebehindclassname$ /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class DatabaseCall : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write("Hello World" + context.Request.QueryString.ToString()); } public bool IsReusable { get { return false; } } } }

Code : (C# - JsonCall.ashx)

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Text; namespace AjaxSample { /// <summary> /// Summary description for $codebehindclassname$ /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class JsonCall : IHttpHandler { public void ProcessRequest(HttpContext context) { StringBuilder jsonBuilder = new StringBuilder(); jsonBuilder.Append(" { "); jsonBuilder.Append(" /"fullname/": /"Sean Kelly/", "); jsonBuilder.Append(" /"org/": /"SK Consulting/", "); jsonBuilder.Append(" /"emailaddrs/": [ "); jsonBuilder.Append(" {/"type/": /"work/", /"value/": /"kelly@seankelly.biz/"}, "); jsonBuilder.Append(" {/"type/": /"home/", /"pref/": 1, /"value/": /"kelly@seankelly.tv/"} "); jsonBuilder.Append(" ], "); jsonBuilder.Append(" /"telephones/": [ "); jsonBuilder.Append(" {/"type/": /"work/", /"pref/": 1, /"value/": /"+1 214 555 1212/"}, "); jsonBuilder.Append(" {/"type/": /"fax/", /"value/": /"+1 214 555 1213/"}, "); jsonBuilder.Append(" {/"type/": /"mobile/", /"value/": /"+1 214 555 1214/"} "); jsonBuilder.Append(" ], "); jsonBuilder.Append(" /"addresses/": [ "); jsonBuilder.Append(" {/"type/": /"work/", /"format/": /"us/", "); jsonBuilder.Append(" /"value/": /"1234 Main StnSpringfield, TX 78080-1216/"}, "); jsonBuilder.Append(" {/"type/": /"home/", /"format/": /"us/", "); jsonBuilder.Append(" /"value/": /"5678 Main StnSpringfield, TX 78080-1316/"} "); jsonBuilder.Append(" ], "); jsonBuilder.Append(" /"urls/": [ "); jsonBuilder.Append(" {/"type/": /"work/", /"value/": /"http://www.biz//"}, "); jsonBuilder.Append(" {/"type/": /"home/", /"value/": /"http://www.tv//"} "); jsonBuilder.Append(" ] "); jsonBuilder.Append(" } "); context.Response.ContentType = "text/plain"; context.Response.Write(jsonBuilder.ToString()); } public bool IsReusable { get { return false; } } } }

Notes:

Additional Javascript files:

1. To create ajax object and make a call - jquery-1.4.3.min.js (http://code.jquery.com/jquery-1.4.3.min.js)

2. Convert string to Json object - jquery.json-2.2.min.js (http://code.google.com/p/jquery-json/)

#2 please refer to http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/JSON/Q_24625994.html

http://code.google.com/p/jquery-json/

 

assuming your json string is:

var jsonString = '{"name": "john", "age": 13}';

 

if you want to retrieve name:

var name = $.evalJSON(jsonString).name;

alert(name);