使用 ASP.NET 对 jQuery AJAX 调用进行故障排除的最佳方法是什么？错误函数正在被调用——我收到弹出窗口的警告，上面写着“错误”，但我不知道为什么。当我附加到我的进程 (w3wp.exe) 并在我的通用处理程序 ProcessRequest 方法后面的代码中放置一个断点时，它并没有停止。所以它甚至没有到达处理程序。为什么会这样？
它也只在我的搜索按钮 (BtnUCSSearch) 上每隔一次点击执行一次错误函数。而且我没有选择像典型的 JavaScript 警报那样在错误弹出窗口上按确定。它闪烁并消失。我尝试输入 return false 以防止整页回发，但这似乎不起作用。
请求页面 JavaScript:
jQuery("#<%=BtnUCSSearch.ClientID %>").click(function() {
urlToHandler = '/Accessioning/FullDataEntry/AddressSearch.ashx';
// hard coding input values for now
jsonData = '{ "CompanyName":"xxx", "PrimaryPhone":"555-555-5555", "PostalCode":"55555" }';
jQuery.ajax({
url: urlToHandler,
data: jsonData,
dataType: 'json',
type: 'POST',
contentType: 'application/json',
success: function(data) {
alert(data.UCSAddress);
},
error: function(data, status, jqXHR) {
alert('Error');
}
}); // end jQuery.ajax
});
AJAX 调用代码的响应页面(AddressSearch.ashx.vb):
Imports System
Imports System.Web
Imports System.Web.Services
Imports System.Web.HttpContext
<WebService([Namespace]:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
Public Class AddressSearch
Implements System.Web.IHttpHandler
Implements System.Web.SessionState.IReadOnlySessionState
ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
Public Sub ProcessRequest(ByVal context As HttpContext) Implements System.Web.IHttpHandler.ProcessRequest
context.Response.ContentType = "application/json"
Dim companyName As String = DirectCast(HttpContext.Current.Request.Form("CompanyName"), String)
Dim primaryPhone As String = DirectCast(HttpContext.Current.Request.Form("PrimaryPhone"), String)
Dim postalCode As String = DirectCast(HttpContext.Current.Request.Form("PostalCode"), String)
Dim json As String = "{ ""UCSAddress"": ""xxxxxxxxx"" }"
context.Response.Write(json)
End Sub
End Class
==============================
2012 年 1 月 2 日下午 12:49 更新
根据两个答案，我做了更多的故障排除..
我检索查询字符串参数的方式似乎不适用于使用 Form。所以我现在使用 QueryString 代替。该页面仍正确返回 JSON 对象。但至少我的查询字符串参数现在应该可以工作了。但是，在本练习中，我直接从浏览器中显式调用了我的通用处理程序——而不是通过我的 jQuery.ajax 调用。所以我知道该页面现在运行良好。
https://localhost/Accessioning/FullDataEntry/AddressSearch.ashx?CompanyName=xxx&PrimaryPhone=555-555-5555&PostalCode=55555
回复:
{ "responseProperty": "xxxxxxxxx"}
请注意，我使用了这两种方法……甚至是 Duarte 先生建议的方法 (JavaScriptSerializer)。它们的工作方式相同……只是架构略有不同。请注意，我必须创建一个名为 SimpleResponse 的自定义类。
Public Sub ProcessRequest(ByVal context As HttpContext) Implements System.Web.IHttpHandler.ProcessRequest
' architecture #1 without JavaScriptSerializer (works)
context.Response.ContentType = "application/json"
Dim companyName As String = DirectCast(HttpContext.Current.Request.QueryString("CompanyName"), String)
Dim primaryPhone As String = DirectCast(HttpContext.Current.Request.QueryString("PrimaryPhone"), String)
Dim postalCode As String = DirectCast(HttpContext.Current.Request.QueryString("PostalCode"), String)
Dim json As String = "{ ""responseProperty"": ""xxxxxxxxx"" }"
context.Response.Write(json)
' architecture #2 with JavaScriptSerializer and SimpleResponse class (also works)
'context.Response.ContentType = "application/json"
'Dim json As JavaScriptSerializer = New JavaScriptSerializer()
'context.Response.Write(json.Serialize(New SimpleResponse()))
'http://codereview.stackexchange.com/questions/3208/basic-simple-asp-net-jquery-json-example
End Sub
Public Class SimpleResponse
Public Property responseProperty() As String
Get
Return _responseProperty
End Get
Set(ByVal value As String)
_responseProperty = value
End Set
End Property
Private _responseProperty As String
Public Sub New()
_responseProperty = "reponse via SimpleResponse class"
End Sub
End Class
================
我还尝试用 JSON.stringify 包装我的 jsonData .. 我仍然收到错误消息。最初，jQuery 甚至没有调用页面，因为处理程序上的类名末尾有一个“1”。当我创建通用处理程序时，它附加了一个“1”，因为我已经有一个名为 AddressSearch.aspx 的类背后的页面和代码。我已经解决了这个问题。我不得不搜索“AddressSearch1”，因为我无法通过在解决方案资源管理器中双击来直接编辑该文件。
<%@ WebHandler Language="VB" CodeBehind="AddressSearch.ashx.vb" Class="UI.Web.AddressSearch1" %>
================
现在它至少调用了我的代码，但它没有将查询字符串参数与我在 jsonData 中设置的数据(我也字符串化)一起传递。它也仍然抛出错误。
还将“var”放在我的 JS 变量前面。
我们越来越近了。
jQuery("#<%=BtnUCSSearch.ClientID %>").click(function() {
var urlToHandler = 'AddressSearch.ashx';
//var urlToHandler = '~/Accessioning/FullDataEntry/AddressSearch.ashx';
//urlToHandler = '/Accessioning/FullDataEntry/AddressSearch.ashx';
// hard coding input values for now
var jsonData = '{ CompanyName:"xxx", PrimaryPhone:"555-555-5555", PostalCode:"55555" }';
//var jsonData = [{ CompanyName: "xxx", PrimaryPhone: "555-555-5555", PostalCode: "55555"}];
jQuery.ajax({
url: urlToHandler,
data: JSON.stringify(jsonData),
dataType: 'json',
type: 'POST',
contentType: 'application/json',
success: function(data) {
//alert("got here");
alert(data.responseProperty);
console.log(" .. response :" + data);
return false;
},
error: function(data, status, jqXHR) {
alert('Error');
//console.log("error :" + XMLHttpRequest.responseText);
//console.log(" .. error :" + data.responseText);
console.log(" .. error");
return false;
}
});
});
==========================
2012 年 1 月 2 日下午 1:52
代码片段 #1(GET 请求):
jQuery("#<%=BtnUCSSearch.ClientID %>").click(function() {
jQuery.get("AddressSearch.ashx", { CompanyName: "xxx", PrimaryPhone: "555", PostalCode: "55555" }, function(data) {
alert("got here");
//alert("Data Loaded: " + data.responseProperty);
return false;
});
});
通过请求页面调用页面(对于#1):
参数:http://screencast.com/t/oA0i48O5y7
标题:http://screencast.com/t/3khfRjI7
回复:没什么
直接通过浏览器调用页面(对于#1):
https://localhost/Accessioning/FullDataEntry/AddressSearch.ashx?CompanyName=xxx&PrimaryPhone=555&PostalCode=55555
响应(页面输出)虽然控制台什么也没说:
{"responseProperty":"通过 SimpleResponse 类响应"}
======================
代码片段 #2(POST 请求类型):
var urlToHandler = 'AddressSearch.ashx';
var jsonData = '{ CompanyName:"xxx", PrimaryPhone:"555-555-5555", PostalCode:"55555" }';
jQuery.ajax({
url: urlToHandler,
data: JSON.stringify(jsonData),
dataType: 'json',
type: 'POST',
contentType: 'application/json',
success: function(data) {
if (data != null) {
alert(data.responseProperty);
console.log(" .. response :" + data);
}
return false;
},
error: function(data, status, jqXHR) {
if (data != null) {
alert("Error: " + data.responseText);
console.log(" .. error :" + data.responseText);
}
alert("error occurred");
return false;
}
});
通过请求页面调用页面(对于#2):
标题:http://screencast.com/t/ostM7NKCxT
发帖:http://screencast.com/t/VKZdgGuOl
回复:http://screencast.com/t/LP3R8OAm
直接通过浏览器调用页面(对于#2):
https://localhost/Accessioning/FullDataEntry/AddressSearch.ashx?CompanyName=xxx&PrimaryPhone=555&PostalCode=55555
响应(页面输出)虽然控制台什么也没说:
{"responseProperty":"通过 SimpleResponse 类响应"}
============================
1/2/2012 @2:48pm
最终代码。注意 e.preventDefault() 和这行代码来防止那个神秘的错误。两者都是剩下的问题: jQuery("#form").submit(function() { return false; });尽管使用 e.preventDefault() 调用，您不需要另一行。所以我把它注释掉了。
jQuery(document).ready(function() {
//jQuery("#form").submit(function() { return false; });
jQuery("#<%=TxtLastName.ClientID %>").focus();
//jQuery("#<%=PnlUCSSearch.ClientID %>").hide();
// START unassigned collection site address search logic
jQuery("#<%=DDLCollectionSite.ClientID %>").change(function() {
//alert("hello world: " + this.value);
if (this.value != "2") {
jQuery("#<%=PnlUCSSearch.ClientID %>").hide();
jQuery("#<%=DDLCollectionSite.ClientID %>").focus();
}
else {
jQuery("#<%=PnlUCSSearch.ClientID %>").show();
jQuery("#<%=TxtUCSCompany.ClientID %>").focus();
}
});
jQuery("#<%=BtnUCSSearch.ClientID %>").click(function(e) {
// jQuery.get("AddressSearch.ashx", { CompanyName: "xxx", PrimaryPhone: "555", PostalCode: "55555" }, function(data) {
// alert("Data Loaded: " + data.responseProperty);
// return false;
// });
var urlToHandler = 'AddressSearch.ashx';
//var urlToHandler = '~/Accessioning/FullDataEntry/AddressSearch.ashx';
//urlToHandler = '/Accessioning/FullDataEntry/AddressSearch.ashx';
// hard coding input values for now
var jsonData = '{ CompanyName:"xxx", PrimaryPhone:"555-555-5555", PostalCode:"55555" }';
//var jsonData = [{ CompanyName: "xxx", PrimaryPhone: "555-555-5555", PostalCode: "55555"}];
jQuery.ajax({
url: urlToHandler,
data: JSON.stringify(jsonData),
dataType: 'json',
type: 'POST',
contentType: 'application/json',
success: function(data) {
if (data != null) {
alert(data.responseProperty);
console.log(" .. response :" + data);
}
},
error: function(data, status, jqXHR) {
//if (data != null) {
// alert("Error: " + data.responseText);
// console.log(" .. error :" + data.responseText);
//}
//alert("error occurred");
}
});
e.preventDefault();
});
// END unassigned collection site address search logic
});
最佳答案
I tried putting in a return false to prevent a full page postback, but that didn't seem to work.
如果主要问题是单击按钮控件导致完整回发而不是对处理程序的异步调用，则可以将此代码添加到 jQuery 单击事件处理程序中的任何位置:
jQuery("#<%=BtnUCSSearch.ClientID %>").click(function(e) {
// Existing code
e.preventDefault();
})
这有效而不是
return false停止浏览器对按钮单击的正常行为。
关于jquery - 在 ASP.NET 中使用通用处理程序对 jQuery AJAX 调用进行故障排除，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8703317/