基本简单的Asp.net + jQuery + JSON的例子

我试图学习如何从Javascript / jQuery的简单的调用服务器。 我一直在努力学习,无法find一个简单的步骤教程。

我想用两个参数(一个DateTime和一个string)发送一条消息到服务器并取回一个DateTime。 我想通过JSON来做到这一点。

  • 服务器中的代码将如何(仅结构)?
  • 在服务器端有什么特别的我应该做的吗? 那安全怎么样?
  • 我将如何实现jQuery中的调用?
  • 而我将如何处理结果呢?

我最感兴趣的代码结构。

更新

我发现下面的答案很好,让我开始。 不过,我最近偶然发现了完整的ASP.NET,LINQ,jQuery,JSON,Ajax教程 。 这只是一个梦幻般的,非常教学的步骤,我想与未来遇到这个问题的其他人分享。

有几种方法可以做到这一点; 这将作为一个例子。

你可以为你的jQuery代码写这样的东西:

urlToHandler = 'handler.ashx'; jsonData = '{ "dateStamp":"2010/01/01", "stringParam": "hello" }'; $.ajax({ url: urlToHandler, data: jsonData, dataType: 'json', type: 'POST', contentType: 'application/json', success: function(data) { setAutocompleteData(data.responseDateTime); }, error: function(data, status, jqXHR) { alert('There was an error.'); } }); // end $.ajax 

接下来,您需要在您的ASP.net项目中创build一个“通用处理程序”。 在您的通用处理程序中,使用Request.Form读取作为json传入的值。 您的通用处理程序的代码可能看起来像这样:

 [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class handler : IHttpHandler , System.Web.SessionState.IReadOnlySessionState { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; DateTime dateStamp = DateTime.Parse((string)Request.Form["dateStamp"]); string stringParam = (string)Request.Form["stringParam"]; // Your logic here string json = "{ \"responseDateTime\": \"hello hello there!\" }"; context.Response.Write(json); } 

看看这是如何工作的。 它会让你开始!

更新:我在CodeReview StackExchange上发布了这个代码: https ://codereview.stackexchange.com/questions/3208/basic-simple-asp-net-jquery-json-example

如果你正在使用jQuery,你可以用GET或POST来完成。

 $.get ('<url to the service>', { dateParam: date, stringParam: 'teststring' }, function(data) { // your JSON is in data } ); $.post ('<url to the service>', { dateParam: date, stringParam: 'teststring' }, function(data) { // your JSON is in data } ); 

请注意,(例如,dateParam,stringParam)中的参数名称需要与服务方法期望的参数的名称相同。 此外,您的服务将需要将结果格式化为JSON,callback中的数据参数将包含您的服务发回的任何内容(例如text,xml,json等)。

查看$ .ajax,$ .get,$ .post的jQuery文档: http: //api.jquery.com/jQuery.ajax/,http://api.jquery.com/jQuery.get/,http :/ /api.jquery.com/jQuery.post/

这里使用jQuery的Ajax调用示例代码,并在服务器端webmethod返回jSon格式的数据。 jquery:

 $('#myButton').on('click',function(){ var aData= []; aData[0] = “2010”; aData[0]=”” var jsonData = JSON.stringify({ aData:aData}); $.ajax({ type: "POST", url: "Ajax_function/myfunction.asmx/getListOfCars", //getListOfCars is my webmethod data: jsonData, contentType: "application/json; charset=utf-8", dataType: "json", // dataType is json format success: OnSuccess, error: OnErrorCall }); function OnSuccess(response.d)) { console.log(response.d) } function OnErrorCall(response)) { console.log(error); } }); 

Codebehind:这是一个返回json格式数据的webmethod,即汽车列表

 [webmethod] public List<Cars> getListOfCars(list<string> aData) { SqlDataReader dr; List<Cars> carList = new List<Cars>(); using (SqlConnection con = new SqlConnection(cn.ConnectionString)) { using (SqlCommand cmd = new SqlCommand()) { cmd.CommandText = "spGetCars"; cmd.CommandType = CommandType.StoredProcedure; cmd.Connection = con; cmd.Parameters.AddWithValue("@makeYear", aData[0]); con.Open(); dr = cmd.ExecuteReader(CommandBehavior.CloseConnection); if (dr.HasRows) { while (dr.Read()) { string carname=dr[“carName”].toString(); string carrating=dr[“carRating”].toString(); string makingyear=dr[“carYear”].toString(); carList .Add(new Cars{carName=carname,carRating=carrating,carYear=makingyear}); } } } } return carList } 

//创build了一个类

 Public class Cars { public string carName; public string carRating; public string carYear; } 

博客文章:

  • jQuery Asp.net ajax JSON示例,C#WebMethod与sql数据库
  • 在Asp.net中使用jQuery Ajax插入数据C#[数据库MS SQLServer]