jQuery 从 ASMX 返回 JSON，并在 Javascript 中正确处理它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3196569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Returning JSON from ASMX, and handling it correctly in Javascript
提问by collumbo
I realize there are tonnes of similar questions already up here but I cannot figure this one out.
我意识到这里已经有很多类似的问题，但我无法弄清楚这个问题。
I have a Web Service (C#, .net 3.5). The essential Code you need to know of is as follows:
我有一个 Web 服务（C#、.net 3.5）。您需要了解的基本代码如下：
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WSMember : System.Web.Services.WebService {
public WSMember () {
}
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public string GetMember(string IdMember)
{
//Ignore the parameter for now... I will be looking up a database with it...
//For now just return a minimal object:
Member m = new Member();
m.Surname = "Smith";
m.FirstName = "John";
return new JavaScriptSerializer().Serialize(m);
}
Also, in web.config, I made the following addition (which I just saw on some other post... is this normal/safe?)
另外，在 web.config 中，我添加了以下内容（我刚刚在其他一些帖子中看到...这正常/安全吗？）
<webServices>
<protocols>
<add name="HttpGet" />
<add name="HttpPost" />
</protocols>
</webServices>
Then in Default.aspx, I the two key references...
然后在 Default.aspx 中，我将两个关键引用...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.json-2.2.min.js" ></script>
jquery.json-2.2.min.js was downloaded from google code
jquery.json-2.2.min.js 是从谷歌代码下载的
And Here is the Javascript:
这是Javascript：
<script type="text/javascript">
$(document).ready(function() {
$("#button1").click(function(event) {
var myData = { IdMember: "2" };
var encoded = $.toJSON(myData);
alert(encoded);
$.ajax({
type: "POST",
url: "WSMember.asmx/GetMember",
data: encoded,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert("worked" + msg.d);
//$("#sidebar").append(msg);
},
error: function(msg) {
alert(msg.d);
//$("#sidebar").append(msg);
}
});
});
});
</script>
When I execute it, the encoded json appears in the message box as expected... i.e. with double quotes:
当我执行它时，编码的 json 会按预期出现在消息框中……即带有双引号：
{ "IdMember":"2" }
{ "IdMember":"2" }
However, it always fails. Even for the most basic Hello World with no data being passed in, it fails. I keep getting "undefined" for the message data.
然而，它总是失败。即使对于没有数据传入的最基本的 Hello World，它也会失败。我不断收到消息数据的“未定义”。
If I just use alert(msg), it displays [object XMLHttpRequest]
如果我只使用 alert(msg)，它会显示 [object XMLHttpRequest]
Does anyone know where my data is getting lost??
有谁知道我的数据在哪里丢失？
And another question... is there anything fundamentally wrong with what I'm doing?
还有一个问题......我所做的有什么根本性的错误吗？
Thanks a lot.
非常感谢。
EDIT:
编辑：
thanks for the reply guys. I have tried the following so...
感谢您的答复家伙。我尝试了以下方法，所以...
UseHttpGet = true is now changed to false. (Again - I saw it somewhere so I tried it... but I knew it couldn't be right :-/ )
UseHttpGet = true 现在更改为 false。（再次 - 我在某处看到它所以我尝试了它......但我知道它不可能是正确的：-/）
Let's say the web service now returns a string. I build the string as follows (seems a bit crazy... serializing it did the exact same thing... )
假设 Web 服务现在返回一个字符串。我按如下方式构建字符串（似乎有点疯狂......序列化它做了完全相同的事情......）
StringBuilder sb = new StringBuilder();
sb.Append("{");
sb.Append("\"Surname\":");
sb.Append("\"");
sb.Append(m.Surname);
sb.Append("\"");
sb.Append(",\"FirstName\":");
sb.Append("\"");
sb.Append(m.FirstName);
sb.Append("\"");
sb.Append("}");
return sb.ToString();
This code returns something like:
此代码返回如下内容：
{"Surname":"Smith","FirstName":"John"}
I still get the exact same error...
我仍然得到完全相同的错误...
I have also tried something like returning the object "Member",so the code becomes:
我也尝试过返回对象“Member”之类的东西，所以代码变成：
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public Member GetMember(string IdMember)
{
Member m = new Member();
m.Surname = "Smith";
m.FirstName = "John";
return m;
}
This too throws the same error.
这也会引发相同的错误。
Sorry to be a pain... I've read both of those links, and others. Just can't see why this any different.
很抱歉让您感到痛苦...我已经阅读了这两个链接和其他链接。只是不明白为什么这有什么不同。
Is there any extra config setting I need to be aware of possibly??
是否有任何额外的配置设置我需要注意？
Thanks a lot for replies.
非常感谢回复。
UPDATE:Problem is fixed. The key mistakes in the above code are:
更新：问题已修复。上面代码中的关键错误是：
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
should be
应该
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
Also, on the form, when using a button to call the javascript, I was incorrectly setting the input type...
另外，在表单上，当使用按钮调用 javascript 时，我错误地设置了输入类型......
<input id="button1" type="submit" value="Just a test" />
when it shouldsay:
什么时候应该说：
<input id="button1" type="button" value="Just a test" />
Many thanks to all who helped.
非常感谢所有帮助过的人。
采纳答案by Oleg
It seems to me that your main problem that you try to manually use JavaScriptSerializer().Serializeinstead of returning an object. The response from the web service will be double JSON encoded.
在我看来，您尝试手动使用JavaScriptSerializer().Serialize而不是返回对象的主要问题。来自 Web 服务的响应将采用双重 JSON 编码。
You are right! There are a lot of a close questions. Look at here Can I return JSON from an .asmx Web Service if the ContentType is not JSON?and Can't get jQuery Ajax to parse JSON webservice resultand you will (I hope) find the answer.
你是对的！有很多问题。看这里如果 ContentType 不是 JSON，我可以从 .asmx Web 服务返回 JSON 吗？并且Can't get jQuery Ajax to parse JSON webservice resultand you will (I hope) find the answer。
UPDATED: Sorry, but you have a small error somewhere what you didn't posted. To close the problem I created a small project with an old version of Visual Studio (VS2008) which has practically exactly your code and which work. I placed it on http://www.ok-soft-gmbh.com/jQuery/WSMember.zip. You can download it, compile and verify that it works. Then you can compare your code with my and find your error.
更新：抱歉，您在某处没有发布的内容有一个小错误。为了解决这个问题，我使用旧版本的 Visual Studio (VS2008) 创建了一个小项目，该项目几乎完全符合您的代码并且可以正常工作。我把它放在http://www.ok-soft-gmbh.com/jQuery/WSMember.zip 上。您可以下载它，编译并验证它是否有效。然后您可以将您的代码与我的代码进行比较并找到您的错误。
Best regards
此致
回答by Brian Mains
If you are doing a post to your data, why are you defining UseHttpGet = true? Shouldn't that be false to match the response type from your request? Also, putting a breakpoint in the ws call to see exactly what the serializer returns would help too... I don't think it should return a JSON object if the return value is a string.
如果您要发布数据，为什么要定义 UseHttpGet = true？与您的请求的响应类型相匹配，这不应该是错误的吗？此外，在 ws 调用中放置一个断点以准确查看序列化程序返回的内容也会有所帮助...如果返回值是字符串，我认为它不应该返回 JSON 对象。
HTH.
哈。
回答by Dave Ward
Yes, definitely do not manually serialize the object. If you return a Membertype, the framework will handle the JSON serialization for you.
是的，绝对不要手动序列化对象。如果您返回一个Member类型，框架将为您处理 JSON 序列化。
When you're seeing the [object XMLHttpRequest] alert, that sounds like it's getting into the error handler in your $.ajax() call, where the response passes in its XHR object as the first parameter. You're probably getting a 500 error on the server.
当您看到 [object XMLHttpRequest] 警报时，这听起来像是进入 $.ajax() 调用中的错误处理程序，其中响应将其 XHR 对象作为第一个参数传递。您可能在服务器上收到 500 错误。
Here's an example of decoding the ASP.NET AJAX error response in jQuery. Most simply, change your error handler to this:
这是在 jQuery 中解码 ASP.NET AJAX 错误响应的示例。最简单的是，将您的错误处理程序更改为：
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
That will give you some insight into what the specific error is.
这将使您深入了解具体错误是什么。
回答by Hamit YILDIRIM
If you are returning any complex object (relational objects with foreign keys), you have 2 options:
如果您要返回任何复杂对象（带有外键的关系对象），您有两个选择：
- Use a DTO object
- Write your own specific serialization converter
- 使用 DTO 对象
- 编写您自己的特定序列化转换器
回答by Juan David Nicholls Cardona
i have bad english, but this is a solution
我的英语不好，但这是一个解决方案
----- WSMember.asmx ------
----- WSMember.asmx ------
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WSMember : System.Web.Services.WebService {
public WSMember () {
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetMember(int IdMember)
{
Member m = new Member();//Get Member from DB, exam Linq to Sql
m.Surname = "Smith";
m.FirstName = "John";
return string.Format("{{ \"Surname\":\"{0}\",\"FirstName\":\"{1}\" }}",m.Surname,m.FirstName);
}
}
---- Default.aspx ----
---- 默认.aspx ----
<a href="#" id="button1">Just a test</a>
<script type="text/javascript">
$("#button1").click(function (event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "WSMember.asmx/GetMember",
data: "{IdMember: 2 }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg.hasOwnProperty('d')) {
msg = msg.d;
}
var json = JSON.parse(msg);
console.log(json.Surname);
console.log(json.FirstName);
},
error: function (xhr, status, error) {
//console.log(xhr);
//console.log(status);
//console.log(error);
}
});
});
</script>
