接上文的流程分析，下面是订空车页面中，正常的订空车流程对应的完整时序图（笔者第一次画时序图，老费劲了……接受拍砖）：
从中可以看出，在一次完整的订车过程中，用户与页面的交互共有五个点，分别是：
页面与后台服务器的交互共有五次，分别是：
且不论这么麻烦冗余的步骤是否合理，我们可以看出用户与页面交互的几个点中，第三个点最耗时，且通常必不可少；而其他的点都可以通过javascript自动化完成或跳过。因此，我们的插件应该只有一次输入过程：提前确定选择预约列表中的第几项，并预先填写一些需要修改的订车信息项目，例如装车日期、订车数、货区货位等，然后把其余的步骤都自动化完成！
我们插件的核心代码，应该透过现有页面的限制，打破“用户<-->页面”、“页面<-->服务器”这两种固有的交互模式，实现用户与服务器之间一步到位的交互，而页面上的表单只起辅助作用。我们的整个流程简化为：
//自动获取预约信息，然后填表
function getPreserved(){
var d = new Date();
d.setDate(d.getDate() + 1);
$.getJSON(‘/gateway/hydzsw/Dzsw/action/ZcrbjhAction_getYsxq‘,{
q:‘‘,
// limit:50,
// timestamp:1394861501408,
zcrq:d.format(‘yyyy-MM-dd‘)},
function(data, textStatus,jqXHR){
if(data.length&& data.length > 0){
resultFunc(data[data.length-1]);//取最后一项
}
});
}functionresultFunc(item){
if (item) {
$("input[name=‘keyword‘]").val(‘‘);
var sycs = item.PZCS - item.JDZC4 - item.YPWZ - item.YQWP - item.FACS;
$("input[name=‘po.xqslh‘]").val(item.XQSLH);
$("input[name=‘po.pzycfh‘]").val(item.PZYCFH);
$("input[name=‘fzhzzm‘]").val(item.FZHZZM);
$("input[name=‘fjm‘]").val(item.FJQC);
$("input[name=‘fhdwmc‘]").val(item.FHDWMC);
$("input[name=‘dzhzzm‘]").val(item.DZHZZM);
$("input[name=‘djm‘]").val(item.DJQC);
$("input[name=‘shdwmc‘]").val(item.SHDWMC);
$("input[name=‘hzpm‘]").val(item.HZPM);
$("select[name=‘po.qqcz‘]").val(item.CZ);
$("input[name=‘po.qqcs‘]").val(sycs);
$("input[name=‘yqwp‘]").val(item.YQWP);
$("input[name=‘ypwz‘]").val(item.YPWZ);
$("input[name=‘jdzc4‘]").val(item.JDZC4);
$("input[name=‘po.qqds‘]").val($("input[name=‘po.qqcs‘]").val() * 60);
$("input[name=‘qqcsMax‘]").val(sycs);
$("input[name=‘po.ifzzjg‘]").attr("checked", item.IFZZJG == ‘1‘);
$("input[name=‘fztmism‘]").val(item.FZTMISM);
$("input[name=‘dztmism‘]").val(item.DZTMISM);
// $("input[name=‘fzyx‘]").val(item.FZYX);
// $("input[name=‘dzyx‘]").val(item.DZYX);
createZyx(item.PZYCFH);
}
}$("#submitBtn").click(function(){
if (validator.form()) {
if (Number($("input[name=‘po.qqcs‘]").val()) > Number($(
"input[name=‘qqcsMax‘]").val())) {
alert("最大可用车数：" + $("input[name=‘qqcsMax‘]").val()
+ "，所报车数不能超过最大可用车数！");
$("input[name=‘po.qqcs‘]").focus();
return false;
}
if (Number($("input[name=‘po.qqds‘]").val()) > Number($(
"input[name=‘po.qqcs‘]").val()) * 80) {
alert("吨数不能超80吨/车！");
$("input[name=‘po.qqds‘]").focus();
return false;
} else {
function save() {
var url = $("#uuid").val() == "" ? "/gateway/hydzsw/Dzsw/action/ZcrbjhAction_add"
: "/gateway/hydzsw/Dzsw/action/ZcrbjhAction_updateForZcrbjh2";
$.ajax({
type : "post",
url : url,
data : $("#saveForm").serialize(),
dataType : "json",
error : function(xhr, msg, e) {
alert("空车数据保存失败");
mask.hide();
},
success : function(msg) {
if (msg.success) {
// alert("空车数据保存成功,"+msg["message"]);
alert2(
"空车数据已成功保存！<br/>您可以在”未报空车查询结果列表“中编辑、打印指定的运单或批量编辑、打印运单，也可凭预约号在车站打印运单。",
function() {
clearForm();
});
// mask.hide();
} else {
alert(msg["message"]);
mask.hide();
}
}
});
}
mask.show();
// 停限装校验
$.ajax({
type : "post",
url : "/gateway/hydzsw/Dzsw/action/TbInformationRestrictionAction_checkOrder",
async : false,
data : {
fztmism : $("#fztmism").val(),
dztmism : $("#dztmism").val(),
fzyx : $("#fzyx").val(),
dzyx : $("#dzyx").val(),
startDate : $("#zcrq").val(),
endDate : $("#zcrq").val()
},
dataType : "json",
error : function(xhr, msg, e) {
},
success : function(msg) {
if (msg.success) {
confirm(msg.message
+ "<br/>您确认保存数据？",
function() {
save();
}, function() {
mask.hide();
}, ‘停限装信息提示‘);
} else {
save();
}
}
});
// 将空车数据以ajax的方式进行提交 saveForm"
// action="ZcrbjhAction_add"
// document.saveForm.submit();
}
}
});$.ajax({
url : "/gateway/hydzsw/Dzsw/action/ZcrbjhAction_operateZcrbjh",
async : true,
type : "POST",
data : "op=10&uuids=" + param + "&mor_dzsw_security_info="
+ securityInfo,
success : function(msg) {
$.unblockUI();
if (msg.success) {
$("#grid").setGridParam({
datatype : "json"
}).trigger(‘reloadGrid‘);
}
if (msg.object) {
varerrorText;
if (msg.object.BQ) {
if (msg.object.ERROR) {
errorText = ‘客户提报预约号为‘ + msg.object.ERROR
+ ‘的单据的时间已超过受理时间,请删除对应单据重新提报‘;
errorText = errorText + ‘</br>预约号为‘ + msg.object.BQ
+ ‘的单据需要转为补充需求,您是否同意?‘;
} else {
errorText = ‘客户提报预约号为‘ + msg.object.BQ
+ ‘的单据需要转为补充需求,您是否同意?‘;
}
confirm(
errorText,
function() {
//alert(msg.object.BQUUID);
$.ajax({
type : "post",
url : "/gateway/hydzsw/Dzsw/action/ZcrbjhAction_operateZcrbjhBq",
data : "op=10&uuids="
+ msg.object.BQUUID
+ "&mor_dzsw_security_info="
+ securityInfo,
dataType : "json",
async : false,
error : function(xhr, msg, e) {
},
success : function(msg) {
if (msg.success) {
$("#grid").setGridParam({
datatype : "json"
}).trigger(‘reloadGrid‘);
}
alert("上报" + msg.message);
}
});
});
} else {
errorText = ‘客户提报预约号为‘ + msg.object.ERROR
+ ‘的单据的时间已超过受理时间,请删除对应单据重新提报‘;
alert(errorText);
}
} else {
alert("上报" + msg.message);
}
}
});以上核心代码基本都来自原始的页面，我们将其重新组织了一下，用5个步骤完成了本文开头那个超复杂的时序图完成的工作，OMG！当然有一些步骤还是不能省的，比如表格的校验和错误提示信息，否则提交失败了却不知道原因，岂不是很失败……
当然，虽然核心代码已经完成，但是具体操作时，直接用这些js代码还是存在诸多不便的，尤其是给普通用户使用时，比较麻烦，因此笔者想到了制作一个chrome插件，毕竟chrome内核的浏览器在国内的市场份额还是非常大的，市面上诸多的12306抢票浏览器也都是集成了插件的chrome内核的浏览器嘛。关于插件的开发文档不多，因此编写过程颇费了一番功夫，笔者抽空再把相关内容整理一下。
记12306货运系统“抢订空车”插件的编写--流程简化及核心代码,布布扣,bubuko.com
记12306货运系统“抢订空车”插件的编写--流程简化及核心代码
原文：http://blog.csdn.net/neareast/article/details/23022341