C# 后台调用接口得到jsion数据,前台解析的过程

不废话,先上源码:

web.config:

</pre><pre name="code" class="html"><pre name="code" class="html"> <!--web.config中定义接口地址-->
<appSettings> <add key="Maerskimportedprecheck" value="http://172.40.66.220:9580/WebCosco/cfl/getCaFaLa?"/> </appSettings>

 


webservice方法  得到JS收据

      /// <summary>
      ///  
      /// </summary>
      /// <param name="AppSetType">接口分类字段</param>
      /// <param name="billno"></param>
      /// <param name="mainkey"></param>
      /// <returns></returns>
        [WebMethod(EnableSession = true)]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public  string GetJson(string AppSetType, string billno ,string mainkey )
        {
            string strurl = ConfigurationManager.AppSettings[AppSetType].ToString();
            string url=null;
            if (string.IsNullOrEmpty(mainkey) || mainkey=="null")
            {
                url = strurl + "billno=" + billno.Trim().ToUpper();
            }
            else
            {
                url = strurl + "billno=" + billno.Trim() + "&mainkey=" + mainkey.Trim();
            }
            string jsonStr = "";
            HttpWebRequest http;
            HttpWebResponse response;
            http = WebRequest.Create(url) as HttpWebRequest;
            using (response = (HttpWebResponse)http.GetResponse())
            {
                using (StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.UTF8))
                {
                    jsonStr = reader.ReadToEnd();
                    
                    http.Abort();
                     
                }
            }
             
            return jsonStr;
        }

前台  ajax调用后台webservice方法,得到jsion数据,并 解析

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Net_Maerskimportedprecheck.aspx.cs"
    Inherits="WDWeb.web.Net_Maerskimportedprecheck" %>

<%@ Import Namespace="Tool" %>
<%@ Register Src="Net_ControlBottom.ascx" TagName="Net_ControlBottom" TagPrefix="uc1" %>
<%@ Register Src="Net_ControlTop.ascx" TagName="Net_ControlTop" TagPrefix="uc2" %>
<%@ Register Src="Net_ControlMenu.ascx" TagName="Net_ControlMenu" TagPrefix="uc3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> </title>
    <link href="css_js/CSS.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css_js/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="css_js/themes/icon.css" /> 
    <link href="css_js/Pager.css" rel="stylesheet" type="text/css" />
    <script src="../css_js/jQuery.js" type="text/javascript"></script>
    <script src="css_js/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="css_js/jquery.pager.js" type="text/javascript"></script>
    <script type="text/javascript" src="../css_js/layer/layer.min.js"></script>
    <script type="text/javascript">
        $(function () {
            SearchUNameMailInfo();

        });
        //搜索数据信息
        function SearchUNameMailInfo() {
            //btnSerach,txtSerachName,txtSerachMail
            //按条件进行查询信息
            $("#img06").click(function () {
                if ($("#txtNo").val() == "") {
                    layer.alert("请输入要查询的提单号!", 0, "友好提醒");
                    $("#txtBegin").focus();
                }
                else {
                    var queryData = "{ AppSetType:'Maerskimportedprecheck',billno:'" + $("#txtNo").val() + "',mainkey:" + null + "}";
                    initTable(queryData);
                }

                return false;
            });
        }

        function initTable(querydata) { //***注意querydata参数的写法**:var queryData = "{ AppSetType:'Maerskimportedprecheck',billno:'" + $("#txtNo").val() + "',mainkey:" + null + "}";
            $.ajax({
                type: "POST", //访问WebService使用Post方式请求
                contentType: "application/json;charset=utf-8", //WebService 会返回Json类型
                url: "../GetJsonStr.asmx/GetJson", //获取数据的地址
                data: querydata, //参数
                dataType: 'json ',
                beforeSend: function (x) { x.setRequestHeader("Content-Type", "application/json; charset=utf-8"); },
                error: function (x, e) {
                    layer.alert(e.toString(), 0, "友好提醒");
                },
                success: function (data) {
                    SetTableData(data);
                }
            });
        };
        function SetTableData(data) {
            $("#HeadInfo").empty();
            $("#DPTInfo").empty();
            var DataObj = $.parseJSON(data.d);
            var HtmlHeadInfo = $("#HtmlHeadInfo").html();
            var tbDPTInfo = $("#tbDPTInfo").html();
            var data = DataObj.obj;


            if (data.length > 1) {
                $.each(data, function (index, obj) {
                    var ItemtbDPTInfo = tbDPTInfo;
                    ItemtbDPTInfo = ItemtbDPTInfo.replace(/@DPTCount/g, index + 1);
                    ItemtbDPTInfo = ItemtbDPTInfo.replace(/@drtype/g, obj.drtype);
                    ItemtbDPTInfo = ItemtbDPTInfo.replace(/@dramount/g, obj.dramount);
                    if (obj.hasOwnProperty("ctnno")) {
                        ItemtbDPTInfo = ItemtbDPTInfo.replace(/@ctnno/g, obj.ctnno);
                    }
                    else {
                        ItemtbDPTInfo = ItemtbDPTInfo.replace(/@ctnno/g, "");
                    }

                    $("#DPTInfo").append(ItemtbDPTInfo);

                });
            }
            else if (data.length == 1) {
            $("#DIVInfo").hide();
                var ItemHeadInfo = HtmlHeadInfo;
                var da = data[0];
                ItemHeadInfo = ItemHeadInfo.replace(/@billno/g, da.billno);
                ItemHeadInfo = ItemHeadInfo.replace(/@vslename/g, da.vslename);
                ItemHeadInfo = ItemHeadInfo.replace(/@voyage/g, da.voyage);
                ItemHeadInfo = ItemHeadInfo.replace(/@drtype/g, da.drtype);
                if (obj.hasOwnProperty("ctnno")) {
                    ItemtbDPTInfo = ItemtbDPTInfo.replace(/@ctnno/g, obj.ctnno);
                }
                else {
                    ItemtbDPTInfo = ItemtbDPTInfo.replace(/@ctnno/g, "");
                }
                $("#HeadInfo").append(ItemHeadInfo);
            }
            else{
            layer.alert("该提单号无对应数据", 0, "友好提醒");
            }

        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <uc2:Net_ControlTop ID="Net_ControlTop1" runat="server" />
    <div id="content">
        <div class="h02">
        </div>
        <!--功能菜单begin-->
        <uc3:Net_ControlMenu ID="Net_ControlMenu1" runat="server" ImgId="14" ImgSrc="images/img-02-2.png" />
        <!--功能菜单end-->
        <div id="content03">
            <table class="C" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="2" height="20" width="1000">
                    </td>
                </tr>
                <tr>
                    <td class="text03">
                        <img src="images/img-03.png" alt="" />   
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/img-line.png" alt="" class="line" />
                    </td>
                </tr>
                <tr>
                    <td height="10">
                    </td>
                </tr>
                <tr>
                    <td>
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                                <%--  <td align="right" height="50">
                                    查询方式:
                                </td>
                               <td class="xx1">
                                    <asp:DropDownList ID="ddlSearchStyle" runat="server" CssClass="text04" Style="height: 30px;">
                                        <asp:ListItem Text="按提单号查询" Value="0"></asp:ListItem>
                                        <asp:ListItem Text="按箱号查询" Value="1"></asp:ListItem>
                                    </asp:DropDownList>
                                </td>--%>
                                <td align="right" height="50">
                                    <label id="lblNo">
                                        <h3>
                                            提单号:</h3>
                                    </label>
                                </td>
                                <td class="xx2">
                                    <asp:TextBox ID="txtNo" runat="server"></asp:TextBox>
                                </td>
                                <td class="xx2">
                                    <a href="javascript:void(0);">
                                        <asp:HiddenField ID="hfOption" runat="server" />
                                        <img src="images/img-06.png" alt="" name="img06" width="105" height="33" border="0"
                                            id="img06" style="vertical-align: bottom;" /></a>
                                </td>
                                <td width="50">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td height="10">
                    </td>
                </tr>
            </table>
             <div class="tidan01" id="divInfo" runat="server">
                <div id="HtmlHeadInfo" style="display: none">
                    <div class="titlex2">
                        <h4>
                            <span>减免信息</span></h4>
                    </div>
                    <div class="fycx01">
                        <ul class="ax1">
                            <li>提单号: <span>@billno</span> </li>
                        </ul>
                        <ul class="ax2">
                            <li >船名:<span>@vslename</span></li>
                             <li style="margin-left:50px">船次:<span>@voyage</span></li>
                        </ul>
                         <ul class="ax2" >
                            <li>减免方式:<span>@drtype</span></li>
                             <li style="margin-left:50px">减免值:<span>@dramount</span></li>
                        </ul>
                    </div>
                </div>
                 <div style="display: none">
                    <table cellpadding="0" cellspacing="1" border="0" id="tbDPTInfo">
                        <tr align="center" class="boat01" height="35">
                            <td style="width: 80px;">
                                @DPTCount
                            </td>
                            <td style="width: 80px;">
                                @drtype
                            </td>
                            <td style="width: 80px;">
                                @dramount
                            </td>
                            <td style="width: 80px;">
                                @ctnno
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="margin:10px" >
                    <div id="HeadInfo">
                    </div>
                    <div id="DIVInfo">
                        <div class="titlex2">
                            <h4>
                                <span>减免信息 </span>
                            </h4>
                        </div>
                        <table cellpadding="0" cellspacing="1" border="0"  style=" border: 2px solid #D5D5D5;">
                            <tr>
                                <td width="1004" colspan="11" height="10" >
                                </td>
                            </tr>
                            <tr class="text10" align="center" bgcolor="dfdfdf">
                                <td height="40" style="width: 80px;">
                                    序号
                                </td>
                                <td style="width: 80px;">
                                    减免方式
                                </td>
                                <td style="width: 80px;">
                                    减免值
                                </td>
                                <td style="width: 80px;">
                                    箱号
                                </td>
                            </tr>
                            <tr align="center">
                                <td colspan="5" >
                                    <div style="overflow-y: scroll; overflow-x: hidden; width: 100%;min-height:50px; max-height: 400px;">
                                        <table border="0" cellpadding="0" cellspacing="1" style="margin: 0; width: 100%;"
                                            id="DPTInfo">
                                        </table>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                </div>
        </div>
    </div>
    <!--底部信息-->
    <uc1:Net_ControlBottom ID="Net_ControlBottom1" runat="server" />
    </form>
</body>
</html>


最近在做ajax,调用后台方法,其实不难,但是总有莫名其妙的错误,不知道怎么查,怎么改。。。愁死了。。万幸偶然解决了,记录一下,以后备用。。。

细心才是根本啊!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值