1/2/2012 @ 12:49 pm更新

Question

使用ASP.NET对jQuery AJAX调用进行故障排除的最佳方法是什么？错误函数被调用 - 我得到弹出窗口的警告“错误”，但我不知道为什么。当我附加到我的进程（w3wp.exe），并将断点放入我的通用处理程序ProcessRequest方法的后面时，它并不止于此。所以它甚至没有达到处理程序。为什么会这样？

它也只是在我的搜索按钮（BtnUCSSearch）上每次点击都执行错误功能。我没有选择按错误弹出窗口就像典型的JavaScript警报一样。它闪烁并消失。我尝试输入一个返回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

=============================

1/2/2012 @ 12:49 pm更新

根据这两个答案，我做了更多的故障排除..

我检索查询字符串参数的方式似乎无法使用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;
            }
        }); 

    });

==========================

1/2/2012 @ 1:52 pm

代码段＃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）：

params：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:48 pm

最终代码。注意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

    });

Answer 1

检查浏览器console以获取更多详细信息，并在回调中设置断点（success，error）

Answer 2

我尝试使用return false来阻止整页回发，但是这似乎不起作用。

如果主要问题是单击按钮控件导致完整回发而不是对处理程序的异步调用，则可以在jQuery click事件处理程序中的任何位置添加此代码：

jQuery("#<%=BtnUCSSearch.ClientID %>").click(function(e) {
    // Existing code
    e.preventDefault();
})

这比return false更有效，可以停止浏览器按钮点击的正常行为。

Answer 3

首先，在javascript中注意全局变量，如果有可能放弃这个实践。

确保申请网址正确，不会返回404错误。

在jquery ajax数据中，使用JSON.stringify（）。

在asp.net处理程序中使用JavascriptSerializer。

如果不起作用，请在打开firebug控制台或chrome控制台的情况下运行。这非常有帮助！

使用ASP.NET中的Generic Handler对jQuery AJAX调用进行故障诊断

1/2/2012 @ 12:49 pm更新

1/2/2012 @ 1:52 pm

1/2/2012 @ 2:48 pm

3 个答案: