<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>查询船期服务网页 直达</title>
<!-- <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>-->
<!-- <script src="json2csv.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/jquery.min.js"></script>
<script src="js/json2csv.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
function GetJsonData() {
// 船期查询服务 请求需要传递json数据
var schoolList = {
"SPL_REQUEST": {
"SERVICE_NAME": "shipPortToPortSearch",
"PARAM_DATA": [
{
"SYSTEM_CODE": "***",
"ORG_CODE": "ALL",
"PAGE_SIZE": "100",
"CURRENT_PAGE": "1",
"POL": $("#POL").val(), //起始港
"POD": $("#POD").val(), //目的港
"CARRIER": $("#CARRIER").val(), // 船公司
"D_OR_A": "D",
"SEARCH_DATE": "2019-04-03",
"WEEK_NUM": "12",
"WEEK_DAYS": "",
"ZD_OR_ZZ": $("#ZD_OR_ZZ").val(), // 直达/中转
"VESSEL_NAME_EN": $("#VESSEL_NAME_EN").val(), // 船名
"VOYAGE_CODE": ""
}
]
}
};
return schoolList;
}
function handleString(data) {
// 无中转情况的 船期信息 查询
// String 字符串拼接修改成 直接读取的格式
// 1. 先把 [] 去掉，
// 2.}，为分隔符进行切分
// 3.切分后的每个元素添加 }
var len = data.length;
var message = data.substring(2, len - 2);
// console.log(message);
var li = message.split("]},");
for (var i = 0; i < li.length; i++) {
if (i == li.length - 1) {
// alert(li[i]);
break;
}
li[i] = li[i] + "]}";
}
// console.log(li.length);
// for (var i = 0; i < li.length; i++) {
// console.log(li[i])
// }
return li;
}
// function handlePTP(data) {
// var len = data.length;
// var message = data.substring(2, len - 2);
// console.log(message);
// }
function getTdData(tdData) {
// 把页面内容现在前台页面
// var jsonStr = '[{"CARRIER":"MAEU","SHIPLINE":"","VESSEL_NAME_EN":"","VESSEL_NAME_CN":"","VOYAGE_CODE":"","POL":"CNSHA","DOCK_CUTTING_DATE":"","ETD":"2019-05-01 17:30:00","ETD_WEEK_DAY":"3","ATD":"","POD":"LSMSU","ETA":"2019-05-29 08:00:00","ETA_WEEK_DAY":"3","ATA":"","SAILING_DAYS":"28","ZD_OR_ZZ":"ZZ","POL_EN":"Shanghai Pt","POL_CN":"上海港","POL_COUNTRY":"CN","POD_EN":"MASERU","POD_CN":"","POD_COUNTRY":"LS","PTP_DTL":[{"CHENG_NUM":"1","CARRIER":"MAEU","SHIPLINE":"AFR","VESSEL_NAME_EN":"MAERSK SIRAC","VESSEL_NAME_CN":"","VOYAGE_CODE":"917S","POL":"CNSHA","DOCK_CUTTING_DATE":"","ETD":"2019-05-01 17:30:00","ETD_WEEK_DAY":"3","ATD":"","POD":"ZADUR","ETA":"2019-05-25 08:00:00","ETA_WEEK_DAY":"6","ATA":"","SAILING_DAYS":"25","POL_EN":"Shanghai Pt","POL_CN":"上海港","POL_COUNTRY":"CN","POD_EN":"DURBAN","POD_CN":"德班","POD_COUNTRY":"ZA"},{"CHENG_NUM":"2","CARRIER":"MAEU","SHIPLINE":"","VESSEL_NAME_EN":"DUMMY","VESSEL_NAME_CN":"","VOYAGE_CODE":"","POL":"ZADUR","DOCK_CUTTING_DATE":"","ETD":"2019-05-26 08:00:00","ETD_WEEK_DAY":"7","ATD":"","POD":"LSMSU","ETA":"2019-05-29 08:00:00","ETA_WEEK_DAY":"3","ATA":"","SAILING_DAYS":"4","POL_EN":"DURBAN","POL_CN":"德班","POL_COUNTRY":"ZA","POD_EN":"MASERU","POD_CN":"","POD_COUNTRY":"LS"}]}]';
// alert(jsonStr);
// var jsonObj = JSON.parse(tdData); //转换成JSON对象 转换成JSON对象报错
// var jsonArr = [];
// alert(tdData.length);
var arrays = [];
//把上次查询的数据删掉
$("#test").children("#message").empty();
// for (var i = 0; i < tdData.length; i++) {
// console.log(tdData[i]);
// console.log(JSON.parse(tdData[i]));
// }
for (var i = 0; i < tdData.length; i++) {
// alert(JSON.stringify(jsonArr[i]));
// console.log(tdData[i] + JSON.parse(tdData[i]));
console.log(tdData[i]);
var cjson = JSON.parse(tdData[i]); //把string 转换成json对象
// console.log(cjson);
var CARRIER;
var SHIPLINE;
var VESSEL_NAME_EN;
var VESSEL_NAME_CN;
var VOYAGE_CODE;
var POL;
var DOCK_CUTTING_DATE;
var ETD;
var ETD_WEEK_DAY;
var ATD;
var POD;
var ETA;
var ETA_WEEK_DAY;
var ATA;
var SAILING_DAYS;
var ZD_OR_ZZ;
var POL_EN;
var POL_CN;
var POL_COUNTRY;
var POD_EN;
var POD_CN;
var POD_COUNTRY;
// var PTP_DTL;
// 读取 键值对组成的数组
for (var key in cjson) {
switch (key) {
case "CARRIER":
CARRIER = cjson[key];
// alert(CARRIER);
break;
case "SHIPLINE":
SHIPLINE = cjson[key];
// alert(SHIPLINE);
break;
case "VESSEL_NAME_EN":
VESSEL_NAME_EN = cjson[key];
// alert(VESSEL_NAME_EN);
break;
case "VESSEL_NAME_CN":
VESSEL_NAME_CN = cjson[key];
// alert(VESSEL_NAME_CN);
break;
case "VOYAGE_CODE":
VOYAGE_CODE = cjson[key];
// alert(VOYAGE_CODE);
break;
case "POL":
POL = cjson[key];
// alert(POL);
break;
case "DOCK_CUTTING_DATE":
DOCK_CUTTING_DATE = cjson[key];
// alert(DOCK_CUTTING_DATE);
break;
case "POL_EN":
POL_EN = cjson[key];
// alert(POL_EN);
break;
case "ETD_WEEK_DAY":
ETD_WEEK_DAY = cjson[key];
// alert(ETD_WEEK_DAY);
break;
case "ATD":
ATD = cjson[key];
// alert(ATD);
break;
case "POD":
POD = cjson[key];
// alert(POD);
break;
case "ETA":
ETA = cjson[key];
// alert(ETA);
break;
case "ETA_WEEK_DAY":
ETA_WEEK_DAY = cjson[key];
// alert(ETA_WEEK_DAY);
break;
case "ATA":
ATA = cjson[key];
// alert(ATA);
break;
case "SAILING_DAYS":
SAILING_DAYS = cjson[key];
// alert(SAILING_DAYS);
break;
case "ZD_OR_ZZ":
ZD_OR_ZZ = cjson[key];
// alert(ZD_OR_ZZ);
break;
case "POL_CN":
POL_CN = cjson[key];
// alert(POL_CN);
break;
case "POL_COUNTRY":
POL_COUNTRY = cjson[key];
// alert(POL_COUNTRY);
break;
case "POD_EN":
POD_EN = cjson[key];
// alert(POD_EN);
break;
case "ETD":
ETD = cjson[key];
// alert(ETD);
break;
case "POD_CN":
POD_CN = cjson[key];
// alert(POD_CN);
break;
case "POD_COUNTRY":
POD_COUNTRY = cjson[key];
// alert(POD_COUNTRY);
break;
case "PTP_DTL":
// console.log(key);
PTP_DTL = cjson[key];
// console.log(PTP_DTL);
// alert(PTP_DTL);
if (typeof PTP_DTL == "undefined" || PTP_DTL == null || PTP_DTL == "") {
break;
} else {
// 取出中转信息中的每个字段
PTP_DTL = JSON.stringify(cjson[key]);
break;
}
default:
break;
}
}
var td = '<tr><td>' + CARRIER + '</td><td>' + SHIPLINE + '</td><td>' + VESSEL_NAME_EN + '</td>' +
'<td>' + VESSEL_NAME_CN + '</td><td>' + VOYAGE_CODE + '</td><td>' + POL + '</td>' +
'<td>' + DOCK_CUTTING_DATE + '</td><td>' + ETD + '</td><td>' + ETD_WEEK_DAY + '</td>' +
'<td>' + ATD + '</td><td>' + POD + '</td><td>' + ETA + '</td>' +
'<td>' + ETA_WEEK_DAY + '</td><td>' + ATA + '</td><td>' + SAILING_DAYS + '</td>' +
'<td>' + ZD_OR_ZZ + '</td><td>' + POL_EN + '</td><td>' + POL_CN + '</td>' +
'<td>' + POL_COUNTRY + '</td><td>' + POD_EN + '</td><td>' + POD_CN + '</td>' +
'<td>' + POD_COUNTRY + '</td>' +
'<td>' + PTP_DTL + '</td>' +
'</tr>';
// alert(td);
// 展示所有的查询数据
$("#test").children("#message").append(td);
arrays[i] = {
"CARRIER": CARRIER,
"SHIPLINE": SHIPLINE,
"VESSEL_NAME_EN": VESSEL_NAME_EN,
"VESSEL_NAME_CN": VESSEL_NAME_CN,
"VOYAGE_CODE": VOYAGE_CODE,
"POL": POL,
"DOCK_CUTTING_DATE": DOCK_CUTTING_DATE,
"ETD": ETD,
"ETD_WEEK_DAY": ETD_WEEK_DAY,
"ATD": ATD,
"POD": POD,
"ETA": ETA,
"ETA_WEEK_DAY": ETA_WEEK_DAY,
"ATA": ATA,
"SAILING_DAYS": SAILING_DAYS,
"ZD_OR_ZZ": ZD_OR_ZZ,
"POL_EN": POL_EN,
"POL_CN": "\ufeff" + POL_CN,
"POL_COUNTRY": POL_COUNTRY,
"POD_EN": POD_EN,
"POD_CN": "\ufeff" + POD_CN,
"POD_COUNTRY": POD_COUNTRY,
"PTP_DTL": "\ufeff" + PTP_DTL
};
}
return arrays;
}
var allCSVData;
function saveCSV() {
var fields = ["CARRIER", "SHIPLINE", "VESSEL_NAME_EN", "VESSEL_NAME_CN", "VOYAGE_CODE", "POL",
"DOCK_CUTTING_DATE", "ETD", "ETD_WEEK_DAY", "ATD", "POD", "ETA", "ETA_WEEK_DAY", "ATA",
"SAILING_DAYS", "ZD_OR_ZZ", "POL_EN", "POL_CN", "POL_COUNTRY", "POD_EN", "POD_CN", "POD_COUNTRY", "PTP_DTL"];
// console.log(allCSVData[0].POL_CN);
// 这里未出现乱码
// json数据转csv格式
var csv = json2csv({data: allCSVData, fields: fields});
// var eleButton = document.querySelector('input[type="button"]');
// 下载文件方法
var funDownload = function (content, filename) {
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 字符内容转变成blob地址
var blob = new Blob(["\ufeff" + content], {type: 'text/csv,charset=UTF-8'});
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
};
if ('download' in document.createElement('a')) {
// 作为test.html文件下载
// eleButton.addEventListener('click', function () {
// funDownload(csv, 'test.csv');
// });
funDownload(csv, 'test.csv');
} else {
eleButton.onclick = function () {
alert('浏览器不支持');
};
}
}
$(document).ready(function () {
// JSON 进行局部刷新
$("button").click(function () {
// alert("22222222222222");
$.ajax({
type: "POST",
url: "https://api.sinotrans.com:8065/SPLServlet/v1/shipPortToPortSearch",
headers: {
"Content-Type": "application/json",
"KeyId": "11fa5def-9efe-4404-b8f3-3dad5e8fbb8a",
},//必须这样写
dataType: "json",
data: JSON.stringify(GetJsonData()),//schoolList是你要提交是json字符串
success: function (data) {
var message = JSON.stringify(data.SPL_RESPONSE.SERVICE_DATA); // 取到json的某个字段，并把其转变为string 类型
// 替换所有的 \
message = message.replace(/\\/g, "");
var handle_message = handleString(message);
// console.log(handle_message);
// handlePTP(handle_message);
//把数据展示出来
allCSVData = getTdData(handle_message);
// 以CSV格式保存起来 加上这个数据，会自动保存为csv文件
// saveCSV(allCSVData);
},
error: function (message) {
alert(message);
$("#request-process-patent").html("提交数据失败！");
}
});
});
});
</script>
</head>
<body>
<form action="#">
起运港: <input type="text" id="POL"><br>
目的港: <input type="text" id="POD"><br>
船公司名称: <input type="text" id="CARRIER"><br>
船名（起始港）: <input type="text" id="VESSEL_NAME_EN"><br>
直达/中转ZD_OR_ZZ: <input type="text" id="ZD_OR_ZZ">ZD为直达 ZZ为中转<br>
<button id="btnSend">查询</button>
</form>
<!--<a id="a1" href="#">服务二</a>-->
<h1>船期查询结果</h1>
<!--<div class="demo">-->
<!-- <p><input type="button" value="把查询结果以CSV格式保存"></p>-->
<!--</div>-->
<button id="save" onclick="saveCSV()">把查询结果以CSV格式保存</button>
<table border="1" id="test">
<tbody>
<tr>
<td>CARRIER</td>
<td>SHIPLINE</td>
<td>VESSEL_NAME_EN</td>
<td>VESSEL_NAME_CN</td>
<td>VOYAGE_CODE</td>
<td>POL</td>
<td>DOCK_CUTTING_DATE</td>
<td>ETD</td>
<td>ETD_WEEK_DAY</td>
<td>ATD</td>
<td>POD</td>
<td>ETA</td>
<td>ETA_WEEK_DAY</td>
<td>ATA</td>
<td>SAILING_DAYS</td>
<td>ZD_OR_ZZ</td>
<td>POL_EN</td>
<td>POL_CN</td>
<td>POL_COUNTRY</td>
<td>POD_EN</td>
<td>POD_CN</td>
<td>POD_COUNTRY</td>
<td>PTP_DTL</td>
</tr>
</tbody>
<tbody id="message">
</tbody>
</table>
</body>
</html>
* jQuery 获取对象
* $("#CARRIER").val() 获取ID为CARRIER的对象的val值
* JavaScript 字符串处理
* data.length
* data.substring(start,end) 截取字符串，从start到end。
* data.split("]},") 切割字符串，形成数组
* message.replace(/\\/g, "") \g 表示所有匹配到的字符串 /\\ /是匹配字符 \\ 第一个\是转义字符 替换所有的\为空
* jQuery json
* JSON.parse(tdData[i]) 把tdData[i]转化为JSON对象
* data.SPL_RESPONSE.SERVICE_DATA 获取JSON对象下的SPL_RESPONSE的SERVICE_DATA字段内容
* JSON.stringify(GetJsonData) 把GetJsonData JSON对象转化为 字符串
* ajax 现成例子
$.ajax({
type: "POST",
url: "https://api.sinotrans.com:8065/SPLServlet/v1/shipPortToPortSearch",
headers: {
"Content-Type": "application/json",
"KeyId": "11fa5def-9efe-4404-b8f3-3dad5e8fbb8a",
},//必须这样写
dataType: "json",
data: JSON.stringify(GetJsonData()),//schoolList是你要提交是json字符串
success: function (data) {
},
error: function (message) {
alert(message);
$("#request-process-patent").html("提交数据失败！");
}
});
* 保存csv文件
687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
