我已经验证了我的 C# Webmethod 的 JSON 响应,所以我不认为这是问题所在。
我尝试使用简单的 jQuery $.ajax 解析结果,但无论出于何种原因,我无法获得正确触发和解析结果的方法,顺便说一句,似乎也无法获得触发结果的函数。它们对可返回的 JSON 对象的大小有任何限制吗?
我还从“Site.Master”页面中删除了这段代码,因为当我点击简单按钮时它总是会刷新。标签是否可以与 jQuery 元素(例如我从 DOM 获取的按钮输入)一起正常工作?
function ajax() {
//var myData = { qtype: "ProductName", query: "xbox" };
var myData = { "request": { qtype: "ProductName", query: "xbox"} };
$.ajax({
type: "POST",
url: "/webservice/WebService.asmx/updateProductsList",
data: {InputData:$.toJSON(myData)},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// var msg = {__type: "Testportal.outputData", id: "li1234", message: "it's work!", myInt:101}
alert("message=" + msg.d.ProductName + ", id=" + msg.d.Brand);
},
error: function (res, status) {
if (status === "error") {
// errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace
var errorMessage = $.parseJSON(res.responseText);
alert(errorMessage.Message);
}
}
});
}
页面:
<asp:Button ID="Button1" runat="server" OnClientClick="ajax();" Text="Button" />
和服务器端 Web 方法:
public class WebService : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public OutputData updateProductsList(InputData request)
{
OutputData result = new OutputData();
var db = new App_Data.eCostDataContext();
var q = from c in db.eCosts
select c;
if (!string.IsNullOrEmpty(request.qtype) && !string.IsNullOrEmpty(request.query))
{
q = q.Like(request.qtype, request.query);
}
//q = q.Skip((page - 1) * rp).Take(rp);
result.products = q.ToList();
searchObject search = new searchObject();
foreach (App_Data.eCost product in result.products)
{
/* create new item list */
searchResult elements = new searchResult()
{
id = product.ProductID,
elements = GetPropertyList(product)
};
search.items.Add(elements);
}
return result;
}
和辅助类:
public class OutputData
{
public string id { get; set; }
public List<App_Data.eCost> products { get; set; }
}
public class InputData
{
public string qtype { get; set; }
public string query { get; set; }
}
最佳答案
您可能遇到的一个问题是,您没有采取任何措施来阻止按钮提交表单并在启动 $.ajax() 回调的同时执行完整的回发/重新加载。
我建议以不显眼的方式进行连接,而不是使用 OnClientClick 属性,如下所示:
$(document).ready(function() {
// May need to use $('<%= Button1.ClientID %>') if your Button is
// inside a naming container, such as a master page.
$('#Button1').click(function(evt) {
// This stops the form submission.
evt.preventDefault();
$.ajax({
// Your $.ajax() code here.
});
});
});
我也同意 Oleg 的观点,即您应该使用 json2.js 进行 JSON 字符串化和解析。在较新的浏览器中,这将回退到浏览器对这些方法的 native 实现,这样速度更快,并使解析更安全。
更新:
回答您有关数据的问题,不,这看起来不太正确。
您最终想要发送到服务器的内容是这样的(无格式):
{"request":{"gtype":"ProductName","query":"xbox"}}
为了实现这一点,您需要这样的东西:
var req = { request : { qtype: "ProductName", query: "xbox" }};
$.ajax({
data: JSON.stringify(req),
// Remaining $.ajax() parameters
});
请记住,request
、qtype
和 query
必须与您的服务器端结构匹配并区分大小写。
您还可以更详细地定义请求对象(我个人更喜欢这样做,以保持事物清晰易读):
var req = { };
req.request = { };
req.request.qtype = "ProductName";
req.request.query = "xbox";
如果您有兴趣,我在这里写了更多相关内容:http://encosia.com/2009/04/07/using-complex-types-to-make-calling-services-less-complex/
关于ajax - 无法让 jQuery Ajax 解析 JSON Web 服务结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3189653/