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

Posted 2023-04-01

【中文标题】基本简单的 Asp.net + jQuery + JSON 示例

【英文标题】：Basic Simple Asp.net + jQuery + JSON example

【发布时间】：2011-08-10 23:59:18

【问题描述】：

我正在尝试学习如何从 javascript/jQuery 对服务器进行简单调用。我一直在努力学习，但找不到包含这些简单步骤的教程。

我想用两个参数（一个日期时间和一个字符串）向服务器发送一条消息，然后返回一个日期时间。我想通过 JSON 来实现。

服务器中的代码看起来如何（仅结构）？ 在服务器端我应该做些什么特别的事情吗？安全性如何？ 如何在 jQuery 中实现调用？ 我将如何处理结果？

我对代码结构最感兴趣。

更新

我发现下面的答案对我很有帮助。然而，我最近偶然发现了Full ASP.NET, LINQ, jQuery, JSON, Ajax Tutorial。这只是一个非常棒且非常具有指导意义的逐步说明，我想与将来遇到此问题的任何人分享。

【问题讨论】：

你会不会碰巧有你提到的文章的源代码？我很感兴趣，但我不清楚要使用哪些文件。更具体地说，我应该创建一个 ASP.NET 网站吗？还是用 C# 编写的类应该包含在 Web 服务中？我只是不确定在哪些文件类型中组织一些代码。

【参考方案1】：

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

你可以为你的 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 项目中创建一个“通用处理程序”。在您的通用处理程序中，使用 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

【讨论】：

注意：如果您的 json 有问题，请务必在 Google 上找到一个好的 json 验证器。

另请注意：文本 'jQuery in Action' 有很好的例子来说明问题的 jQuery 方面。

我在做实验，会告诉你的！

准备好调试器。我第一次经历这个过程时，每一步都犯了错误。一定要通过你的 javascript 代码，也是。如果您无法让调试器在任何特定的 javascript 代码行上停止，请使用 debugger 关键字。

你们知道我的代码可能出了什么问题吗？这几乎与这个答案相同。 ***.com/questions/8703317/…

【参考方案2】：

如果您使用的是 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，回调中的数据参数将包含您的服务发回的任何内容（例如文本、xml、json 等）。

请参阅 $.ajax、$.get、$.post 的 jQuery 文档：http://api.jquery.com/jQuery.ajax/、http://api.jquery.com/jQuery.get/、http://api.jquery.com/jQuery.post/

【讨论】：

请注意，get 和 post 的默认内容类型为 application/x-www-form-urlencoded; charset=UTF-8。所以这不会通过 Json 向服务器发送数据。接受的答案在哪里。

【参考方案3】：

这里的示例代码使用 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); 
);

代码隐藏：这是一个返回 json 格式数据的网络方法，即汽车列表

[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 CarscarName=carname,carRating=carrating,carYear=makingyear); 
        
                
            
          
        return carList 
        

//创建了一个类

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

【讨论】：

警告这段代码有很多错误，尽管它确实指向了正确的方向。