3

使用 ASP.NET 对 jQuery AJAX 调用进行故障排除的最佳方法是什么？错误函数被调用——我收到弹出“错误”的警报，但我不知道为什么。当我附加到我的进程 (w3wp.exe) 并在我的通用处理程序 ProcessRequest 方法后面的代码中放置一个断点时，它不会停在那里。所以它甚至没有到达处理程序。为什么会这样？

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

回复：

{“响应属性”：“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 中设置的数据一起传递（我也将其字符串化）。它也仍然抛出错误。

还要在我的 JS 变量前面加上“var”。

我们越来越近了。

    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”：“reponse via简单响应类"}

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

代码片段 #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 类响应”}

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

2012 年 1 月 2 日下午 2:48

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

    });
4

3 回答 3

3

检查浏览器以获取更多详细信息并在回调( , )console中设置断点successerror

于 2012-01-02T16:57:27.870 回答
3

我尝试输入 return false 以防止整页回发，但这似乎不起作用。

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

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

这有效，而不是return false阻止浏览器单击按钮的正常行为。

于 2012-01-02T20:39:18.233 回答
2

首先，注意javascript中的全局变量，如果可能的话放弃这种做法。

确保申请 URL 正确且不返回 404 错误。

在 jquery ajax 数据中，使用 JSON.stringify()。

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

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

于 2012-01-02T17:26:32.567 回答