在一个简单的JSON Hello World应用程序中遇到麻烦。

I am trying to learn how to write more dynamic web sites that use Ajax. The examples I found seem to pass only a single string parameter to and from a service. After a little more looking, I saw that some developers pass more than one value by creating an object and then serializing the object using JSON.

我正在尝试学习如何编写更多使用Ajax的动态web站点。我发现的示例似乎只向服务传递一个字符串参数。再看了一遍之后，我发现一些开发人员通过创建一个对象并使用JSON序列化该对象来传递多个值。

So, I wanted to create a simple HelloWorld app that passes objects in both directions. For example, where a service serializes a .NET object as JSOn and passes it back to the browser for parsing by Javascript and also an example where a Javascript object is serialized to JSON on the client side and then de-serialized to a .NET object on the server. To serialize a Javascript object to JSON, I found a javascript routine, json.js, at json.org,

因此，我想创建一个简单的HelloWorld应用程序，它向两个方向传递对象。例如，服务将. net对象序列化为JSOn，并将其传递回浏览器，通过Javascript进行解析，还有一个例子，在客户端将Javascript对象序列化为JSOn，然后在服务器上将其反序列化为. net对象。要将Javascript对象序列化为JSON，我找到了一个Javascript例程JSON。js,json.org

My simple example has the following include files:

我的简单示例包含以下文件:

<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/json.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/script.js"></script>

The 3rd is my own js file, which includes the following code:

第三个是我自己的js文件，包含以下代码:

function CallHandler()
{

    $.ajax({
        url: "Handlers/Handler1.ashx",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: { 'Id': '101', 'Name': 'Chad' },
        responseType: "json",
        success: OnComplete,
        error: OnFail
    });
    return false;
}

function CallHandler2()
{
    var EmployeeSerialized = JSON.stringify(GetInput());

    $.ajax({
        url: "Handlers/Handler2.ashx",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: EmployeeSerialized,
        responseType: "json",
        success: OnComplete2,
        error: OnFail
    });
    return false;
}

function GetInput()
{
    var emp = new Object();
    emp.Name = 'Brij';
    emp.Age = '27';
    return emp;
}
function OnComplete(result)
{
    alert(result.ID + ' ' + result.Name + ' ' + result.Age + ' ' + result.Timestring);
}

function OnComplete2(result)
{
    alert("Complete2");
}

function OnFail(result)
{
    alert('Ajax failed' + result);

}

it is called from the following web page:

它从以下网页被调用:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script language="javascript" type="text/javascript" src="Scripts/json.js"></script>
    <script language="javascript" type="text/javascript" src="Scripts/script.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="CallHandler" OnClientClick="CallHandler();" />
        <asp:Button ID="Button2" runat="server" Text="CallHandler2" OnClientClick="CallHandler2();" />
    </div>
    </form>
</body>
</html>

My problem is that I can't get both button events to work at the same time. For example, as the app stands now, if I include all 3 of the INCLUDE statements, only the Callhandler2 event successfully calls its server sides Httphandler. However, if I comment out the json.js INCLUDe file, the first one works, but the second one breaks. Clearly, the 2nd one breaks because it requires the Stringify function that was found in the removed js file. The question is, why does including the json.js file break the Callhandler2 event? There must be some kind of a *.

我的问题是我不能让两个按钮事件同时工作。例如，就像现在的应用程序一样，如果我包含所有3个include语句，那么只有Callhandler2事件成功调用了它的服务器端Httphandler。但是，如果我注释json。js包含文件，第一个有效，第二个失效。很明显，第二个中断是因为它需要在删除的js文件中找到Stringify函数。问题是，为什么要包含json。js文件中断Callhandler2事件?一定有什么冲突。

Thinking that I should try the latest version of the jQuery lib, I tried to include version 1.6.2, but, when the CallHandler2 buton was pushed, this only introduced a JSON parsing error with the older jQuery library that didn't occur before.

考虑到我应该尝试jQuery lib的最新版本，我尝试包含1.6.2版本，但是，当调用handler2 buton时，这只是在旧的jQuery库中引入了一个以前没有出现过的解析JSON错误。

I find working with Javascript very frustrating compared to my experience with Server sided development for many reasons including the lack of good error messages. In this case, I don't have an error message, the functionality just breaks.

与我的服务器端开发经验相比，我发现使用Javascript非常令人沮丧，原因包括缺少良好的错误消息。在这种情况下，我没有错误消息，功能就会中断。

Since I figured it may be difficult for you too to find the error, I posted my code. Here is my small Visual Studio 2010 project . If you download my project, you might have to reset the readonly flags on the files if you want to modify them. Sorry about that.

由于我认为您可能也很难找到错误，所以我发布了我的代码。这是我的小型Visual Studio 2010项目。如果您下载了我的项目，您可能需要重置文件上的readonly标志，如果您想修改它们。很抱歉。

Update:

更新:

I see that the error is at line 554 of json.js:

我看到错误在json.js的第554行:

// If the text is not JSON parseable, then a SyntaxError is thrown.

throw new SyntaxError('JSON.parse');

I see that the variable EmployeeSerialized evaluates to

我看到EmployeeSerialized变量的值是

{"Name":"Brij","Age":"27"}

and then the ajax call in the Callhandler2 function dies with the following error when I try to pass the EmployeeSerialized JSON string value as data to the Handler2 HttpHandler.

然后，当我试图将EmployeeSerialized JSON字符串值作为数据传递给Handler2 HttpHandler时，Callhandler2函数中的ajax调用以以下错误终止。

SCRIPT5022: Exception thrown and not caught 
json.js, line 554 character 13

What, if anything, is wrong with this JSON string?

这个JSON字符串有什么问题吗?

1 个解决方案

#1

Its not your code, there is a conflict with json.js and jquery. Use json2.js file from https://github.com/douglascrockford/JSON-js and things should work much better.

它不是您的代码，与json有冲突。js和jquery。使用json2。来自https://github.com/douglascrockford/JSON-js的js文件应该会更好。

See Json JQuery conflict For answers to a similar/same issue

类似/相同问题的答案请参见Json JQuery冲突

#1