Using JQuery's ajax to call webservice and ashx handler in asp.net

1. Firstly, call the webservice

   1) Create Web service using asp.net

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services; // This is very important to using [ScriptService] attributeusing System.Web.Script.Services;namespace JQueryLearn{ /// <summary> /// Summary description for WebService1 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService] // this is important to make it available for JQuery [System.ComponentModel.ToolboxItem(false)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. // [System.Web.Script.Services.ScriptService] public class WebService1 : System.Web.Services.WebService { [WebMethod] public string HelloWorld() { return "Hello World"; } [WebMethod] public string Hello(string name) { return string.Format("Hello {0}", name); } /// <summary> /// 返回泛型列表 /// </summary> /// <param name="i"></param> /// <returns></returns> [WebMethod] public List<int> CreateArray(int i) { List<int> list = new List<int>(); while (i >= 0) { list.Add(i--); } return list; } /// <summary> /// 返回复杂类型 /// </summary> /// <param name="name"></param> /// <param name="age"></param> /// <returns></returns> [WebMethod] public Person GetPerson(string name, int age) { return new Person() { Name = name, Age = age }; } } public class Person { public string Name { get; set; } public int Age { get; set; } }}

 

2) Create Script for calling the service on the web pages.

<mce:script type="text/javascript"><!-- $(function() { $("#btnHelloWorld").click(function() { $.ajax({ type: "POST", contentType: "application/json;utf-8", url: "WebService1.asmx/HelloWorld", data: "{}", dataType: 'json', success: function(result) { alert(result.d); } }); }); //传入1个参数 $("#btnHello").click(function() { $.ajax({ type: "POST", contentType: "application/json", url: "WebService1.asmx/Hello", data: "{name:'KiMoGiGi'}", dataType: 'json', success: function(result) { alert(result.d); } }); }); //返回泛型列表 $("#btnArray").click(function() { $.ajax({ type: "POST", contentType: "application/json", url: "WebService1.asmx/CreateArray", data: "{i:10}", dataType: 'json', success: function(result) { alert(result.d.join(" | ")); } }); }); //返回复杂类型 $("#btnPerson").click(function() { $.ajax({ type: "POST", contentType: "application/json", url: "WebService1.asmx/GetPerson", data: "{name:'KiMoGiGi',age:26}", dataType: 'json', success: function(result) { var person = result.d; var showText = []; for (var p in person) { showText.push(p + ":" + person[p]); } alert(showText.join("/r/n")); } }); }); });// --></mce:script>

 

 

2. Calling ashx handler for JQuery

1) Create JQuery for calling the handler

function Button1_onclick() { $.ajax({ type: "POST", url: "Handler1.ashx", data: "name=John&location=Boston", success: function(msg) { alert("Data Saved: " + msg); } }); }

2) Create handler

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