在后面的代码中使用 AJAX 错误传递 json 对象答案

【问题标题】：Passing json object using AJAX error in code behind在后面的代码中使用 AJAX 错误传递 json 对象
【发布时间】：2012-08-28 21:41:57
【问题描述】：

我创建了一个 HTML 文件，它将尝试将 json 值传递给我的 asp 页面，但我的 asp 出现错误。我的 HTML 工作正常并传递值 {'a':'a','b':'b'}，但 asp 页面无法使用该值。

这是我的 HTML 代码并显示 JSON 值 {'a':'a','b':'b'}：

  <html>
  <head>
  <title></title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <script type="text/javascript"> 

    $(document).ready(function() {
    $('#btnAdd').click(function() { 


        var json_obj = "{'" + $('#t1').val() + "' : '" + $('#p1').val() + "','" + $('#t2').val() + "' : '" + $('#p2').val() + "'}"; 


        $.ajax({ 
            type: 'POST', 
            url: 'http://localhost/Base_Data/InsertItem.aspx', 
            contentType: 'application/json; charset=utf-8', 
            data: json_obj, 
            dataType: 'json', 
            success: function(msg) { 
                alert('Success!'); 
            }, 
            error: function(msg) { 
                alert('Error!'); 
            } 
        }); 
    }); 
  }); 
  </script> 
  </head>
  <body>

<div> 
Type: 1: <input type="text" id="t1" /> 
Property 1: <input type="text" id="p1" /> 

Type 2: <input type="text" id="t2" /> 
Property 2: <input type="text" id="p2" /> 
<input type="button" id="btnAdd" value="Add object!" /> 

</div> 

</body>
</html>

这是我背后的 ASP 页面代码：

public class Test
{
public Test(string json)
{

    var serializer = new JavaScriptSerializer();
    var result = serializer.DeserializeObject(json);

    var first = int.Parse(result["t1"]);
    var second = int.Parse(result["t2"]); 
 }

  public string first { get; set; }
  public string second { get; set; }
 }

任何回复都将受到高度赞赏。提前致谢！

【问题讨论】：

"但是 asp 页面无法使用该值" - 你能解释一下为什么吗？
你有什么理由使用't1'和't2'作为键。您的示例中的键由该字段中的用户输入确定。您的键 $('#t1').val() 将返回 t1 字段中的内容。如果您想使用 t1 和 t2 作为键，则将 json 设置为 {t1:value,t2:value}。也像其中一个答案中提到的那样，避免对 JSON 进行粗暴处理。使用类似 x={key1:value1,key2:value2} 的东西，很多时候你甚至不需要序列化它。如果必须使用 JSON.stringiy(x).

标签： c# javascript asp.net ajax json

【解决方案1】：

当向$.ajax 方法传递数据时，data 参数通常是一个带有键/值对的javascript 对象，这些键/值对被放入查询字符串中，如foo=bar&person=ted。将 JSON 字符串放入其中，然后尝试在服务器中解析该 JSON 是向服务器发送几个值的艰难方法，而且在服务器上解析它也需要做很多工作。

使用 $.ajax 方法的内置数据功能会将数据转换为查询字符串格式，并且您的服务器也可以自动解析出来 - 无需在客户端或服务器上编写任何新代码。

来自jQuery docs：

数据

要发送到服务器的数据。它被转换为查询字符串，如果还不是字符串。它附加到 GET 请求的 url。请参阅 processData 选项以防止此自动处理。目的必须是键/值对。如果 value 是一个数组，jQuery 序列化基于传统的值具有相同键的多个值设置（如下所述）。

【讨论】：

不，不是，data 可以是字符串，如果它作为 JS 对象传递，它会转换为查询字符串。
@James - OP 的代码是否期望将代码作为嵌入查询字符串的 JSON 字符串传递给服务器？为什么要那样做？
不，我认为 OP 希望将数据作为 JSON 字符串传递给服务器。
@James - 为什么要为四个数据值费心呢？如果 OP 使用 $.ajax 数据对象，那么他们可以在客户端和服务器上免费获取所有内容，而不必构造和解构 JSON。
大家好，我是新来的，我只是从我阅读的关于 html 将 json 值传递给 asp 的文章中尝试一下。解决此问题后，我可能会在我的 asp 页面中使用 isert sql。那么我的变量应该是什么样子？以及如何在 asp 中构造我的代码以接受来自我的 html 的值？

【解决方案2】：

我会避免手动生成纯 JSON，因为它总是会导致问题，尝试使用类似 JSON.stringify 的东西，这将使您的数据构造更容易，因为您可以使用适当的 JS 对象，例如

var jsonObj = { t1: $('#t1').val(), p1: $('#p1').val(), t2: $('#t2').val(), p2: $('#p2').val() };

$.ajax({  
    type: 'POST',  
    url: 'http://localhost/Base_Data/InsertItem.aspx',  
    contentType: 'application/json; charset=utf-8',  
    data: JSON.stringify(jsonObj),  
    dataType: 'json',  
    success: function(msg) {  
        alert('Success!');  
    },  
    error: function(msg) {  
        alert('Error!');  
    }  
});

然后在服务器端将您的 json 反序列化为 dynamic 对象并取回数据：

public Test(string json)  
{  
    var serializer = new JavaScriptSerializer();  
    var result = serializer.Deserialize<dynamic>(json);  

    var first = int.Parse(result["t1"]);  
    var second = int.Parse(result["t2"]);   
}

更新

根据您的评论，您将无法使用 dynamic 对象，您应该能够将 JSON 反序列化为 Dictionary，例如

var result = serializer.Deserialize<Dictionary<string, string>>(json);

【讨论】：

嗨，詹姆斯，我在 APS 上有一个错误。在 .. 它说“找不到类型或命名空间名称'dynamic'”。
@JR_13 您使用的是什么版本的 Visual Studio？认为您至少需要 2010 年才能使用 dynamic 类型。
,，我用的是VS 2008，有没有其他办法，vs2008的方式可以处理吗？谢谢！