使用AJAX从asmx Web服务返回字符串数据

时间:2013-12-27 06:50:45

标签: javascript jquery ajax vb.net web-services

我有一个.asmx webservice,它从我的数据库中获取一些数据,并使用stringbuilder(VB.net)构建HTML。当我回来并提醒ajax返回的数据值时,我得到以下结果:

{"d":"\u003cdiv class=\"col-md-6\"\u003e\u003cform id=\"frmShoppingCart\"\u003e\u003ctable class=\"table\"\u003e\u003ctr\u003e\u003ctd width=\"25%\"\u003e\u003cimg src=\"/images/productImages/BBO/B1021TRA-GRN-1.jpg\u003c/td\u003e\u003ctd width=\"75%\"\u003e\u003cselect id=\"seaCombo\" class=\"form-control\"\u003e\u003coption value=\"2\"\u003e2\u003c/option\u003e\u003coption value=\"1\"\u003e1\u003c/option\u003e\u003c/select\u003e\u003cbr /\u003e\u003cbr /\u003e\u003ch4\u003eB1021TRA\u003c/h4\u003e\u003cbr /\u003e\u003cbr /\u003e\u003ch5\u003e\u003csmall\u003ePrice: $26.00 MSRP: $55.00\u003c/small\u003e\u003c/h5\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003c!-- End Header Table --\u003e\u003c/div\u003e\u003c!-- col-md-6 --\u003e"}

以下是构建HTML的代码:

 <WebMethod()> _
    Public Function GetProductForPopup(strStyleID As String) As String
        Dim sbHTML As New StringBuilder
        Dim sbSeasons As New StringBuilder
        Dim params As New Hashtable
        Dim tProductList As New ProductList
        Dim tSeasonProductList As New ProductList
        Dim strLastSeason As String = ""
        Dim strLastColor As String = ""
        Dim blnFirstTime As Boolean = True
        Dim blnSeasonsBuilt As Boolean = False
        Dim strCboSeasons As String = ""
        Dim strPopupHTML As String = ""
        params.Add("product_code", strStyleID)
        tProductList = CatalogManager.getProducts(params)
        tSeasonProductList = CatalogManager.getProducts(params)

        ' Get all seasons in the product list we are going to work with
        If Not blnSeasonsBuilt Then
            sbSeasons.Append("<select id=""seaCombo"" class=""form-control"">")
            For Each tSeaProd As Product In tSeasonProductList
                If Trim(tSeaProd.season) <> strLastSeason Then
                    sbSeasons.Append("<option value=""" & Trim(tSeaProd.season) & """>" & Trim(tSeaProd.season) & "</option>")
                    strLastSeason = Trim(tSeaProd.season)
                End If
            Next
            sbSeasons.Append("</select>")
            blnSeasonsBuilt = True
            strLastSeason = ""
            strCboSeasons = sbSeasons.ToString()
        End If

        sbHTML.Append("<div class=""col-md-6"">")

        sbHTML.Append("<form id=""frmShoppingCart"">")
        For Each tProd As Product In tProductList
            If blnFirstTime Then ' on first time through add the image and product information to the table
                sbHTML.Append("<table class=""table"">")
                sbHTML.Append("<tr><td width=""25%"">")
                sbHTML.Append("<img src=""/images/productImages/BBO/" & tProd.code & "-" & tProd.color & "-1.jpg")
                sbHTML.Append("</td><td width=""75%"">")
                sbHTML.Append(strCboSeasons)
                sbHTML.Append("<br /><br />")
                sbHTML.Append("<h4>" & tProd.code & "</h4>")
                sbHTML.Append("<br /><br />")
                sbHTML.Append("<h5><small>")
                sbHTML.Append("Price: " & FormatCurrency(tProd.price, 2) & "  MSRP: " & FormatCurrency(tProd.msrp))
                sbHTML.Append("</small></h5>")
                sbHTML.Append("</td></tr></table><!-- End Header Table -->")
                blnFirstTime = False
            End If
            If (strLastColor <> Trim(tProd.color)) Then ' Check to see if color matches -- if so then check for season match
                If (strLastSeason <> Trim(tProd.season)) Then ' Season and color are different

                Else ' Color is different but season is the same so add to the original table


                End If
            End If

            strLastSeason = Trim(tProd.season)
            strLastColor = Trim(tProd.color)
        Next
        sbHTML.Append("</div><!-- col-md-6 -->")
        strPopupHTML = sbHTML.ToString()
        Return strPopupHTML
    End Function

以下是Javascript调用:

function productPopup(sProductTitle, sStyleID) {
    $('#productModalLabel').html(sProductTitle);
    $.ajax({
        type: "POST",
        url: "/webservices/ProductServer.asmx/GetProductForPopup",
        data: "{ 'strStyleID':'"  + sStyleID + "' }",
        contentType: "application/json; character=utf-8",
        dataType: "text",
        success: function (data) {
            $("#contentDiv").html(data);
            alert("Success:" + data); },
        failure: function (xhr, ajaxoptions, thrownError) {
            alert("Error1:" + xhr.status);
            alert("Error2:" + thrownError);
        }
    });
    $('#productModal').modal();
}

如何将这些东西变成HTML?

1 个答案:

答案 0 :(得分:1)

更改您的javascript以请求'json'dataType并在您的数据上使用.d属性,如下所示:

function productPopup(sProductTitle, sStyleID) {
    $('#productModalLabel').html(sProductTitle);
    $.ajax({
        type: "POST",
        url: "/webservices/ProductServer.asmx/GetProductForPopup",
        data: "{ 'strStyleID':'"  + sStyleID + "' }",
        contentType: "application/json; character=utf-8",
        dataType: "json",
        success: function (data) {
            $("#contentDiv").html(data.d);
            alert("Success:" + data.d); },
        failure: function (xhr, ajaxoptions, thrownError) {
            alert("Error1:" + xhr.status);
            alert("Error2:" + thrownError);
        }
    });
    $('#productModal').modal();
}

您可以在此处查看data.d原因的解释:http://encosia.com/a-breaking-change-between-versions-of-aspnet-ajax/