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

Question

我正在学习如何使用Javascript/jQuery从客户端向服务器发起简单的调用。我一直在尝试学习，但无法找到那些简单步骤的教程。

我想要通过JSON传递两个参数（一个日期时间和一个字符串），并获取一个日期时间的返回值。

• 服务器中的代码结构应该是什么样子的（仅结构）？
• 在服务器端是否需要特别处理？安全问题该怎么解决？
• 如何在jQuery中实现调用？
• 如何处理返回结果？

我最感兴趣的是代码结构。

更新

我发现下面的答案对我入门很有帮助。然而，最近我偶然发现了Full ASP.NET, LINQ, jQuery, JSON, Ajax Tutorial。这是一个非常出色和详细的、循序渐进的教程，我想与任何未来遇到这个问题的人分享。

- Adriano Carneiro

---

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

Answer 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

- Vivian River

---

请注意：如果您在处理JSON时遇到困难，请务必在谷歌上搜索一个好的JSON验证器。 - Vivian River

另外请注意：文本“jQuery in Action”中有非常好的jQuery示例，可以回答你的问题。 - Vivian River

我正在进行实验，会让你知道的！ - Adriano Carneiro

准备好你的调试器。第一次经历这个过程时，我在每个步骤都犯了错误。确保也逐步执行你的JavaScript代码。如果你无法让调试器停在特定的JavaScript代码行上，请使用“debugger”关键字。 - Vivian River

你们知道我的代码可能出了什么问题吗？它几乎和这个答案一模一样。 https://dev59.com/nF7Va4cB1Zd3GeqPNda- - Entree

Answer 2

这里是使用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。

[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 
        }

//创建一个类

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

- Satinder singh

---

警告：这段代码有很多错误，但它指向了正确的方向。 - nu everest

Answer 3

如果您正在使用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等）。

请参阅jQuery文档以获取$.ajax、$.get、$.post：http://api.jquery.com/jQuery.ajax/, http://api.jquery.com/jQuery.get/, http://api.jquery.com/jQuery.post/。

- Scott Lance

---

请注意，get 和 post 的默认内容类型为 application/x-www-form-urlencoded; charset=UTF-8。因此，这不会通过 Json 将数据发送到服务器。而接受的答案则可以。 - Liam