不废话,先上源码:
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,调用后台方法,其实不难,但是总有莫名其妙的错误,不知道怎么查,怎么改。。。愁死了。。万幸偶然解决了,记录一下,以后备用。。。
细心才是根本啊!!