gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 05:03:08 25 4
gpt4 key购买 nike

我正在尝试学习如何使用 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 库,因此尝试包含版本 1.6.2,但是,当按下 CallHandler2 按钮时,这只会引入旧版 jQuery 库的 JSON 解析错误,而旧版 jQuery 库并没有这样做。发生在之前。

与我在服务器端开发的经验相比,我发现使用 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 字符串有什么问题(如果有的话)?

最佳答案

这不是你的代码,与json.js和jquery有冲突。使用 https://github.com/douglascrockford/JSON-js 中的 json2.js 文件事情应该会更好。

参见Json JQuery conflict类似/相同问题的答案

关于jquery - 使用简单的 JSON Hello World 应用程序时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8252274/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com