Question

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

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

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

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

第三个是我自己的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);

}

从以下网页调用：

<%@ 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>

我的问题是我不能让两个按钮事件同时工作。例如，当应用程序立即生效时，如果我包含所有3个INCLUDE语句，则只有Callhandler2事件成功调用其服务器端Httphandler。但是，如果我注释掉json.js INCLUDe文件，第一个工作，但第二个工作正常。显然，第二个中断因为它需要在删除的js文件中找到的Stringify函数。问题是，为什么包含json.js文件会破坏Callhandler2事件？必定会有某种冲突。

认为我应该尝试最新版本的jQuery lib，我试图包含版本1.6.2，但是，当推送CallHandler2按钮时，这只引入了一个旧的jQuery库的JSON解析错误发生在之前。

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

由于我认为你也很难找到错误，我发布了我的代码。这是我的小型Visual Studio 2010 project 。如果您下载我的项目，如果要修改它们，则可能必须重置文件上的只读标志。对于那个很抱歉。

更新

我看到错误发生在json.js的第554行：

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

throw new SyntaxError('JSON.parse');

我看到变量EmployeeSerialized评估为

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

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

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

这个JSON字符串有什么问题？

Answer 1

它不是你的代码，与json.js和jquery存在冲突。使用https://github.com/douglascrockford/JSON-js中的json2.js文件，事情应该会好得多。

请参阅Json JQuery conflict以获取类似/相同问题的答案

使用简单的JSON Hello World应用程序时遇到问题

1 个答案: