项目中的一个JQuery ajax实现案例

/**
* brief 这些代码用于在线制图中 attention author <list of authors> <date> begin modify by
* null
*/
/** 获取参数并拼接参数 */
var params = "";

/** 判断是否选择了要制作的图形产品 */
function judgeIfSelectedProduct() {
var b = false;
var length = $("#serviceForm #code").length;
// alert("选择的图形产品是：" + length);
if (length <= 0) {
b = false;
} else {
b = true;
}
return b;
}

/** 拼接不存在的，替换存在的 */
function replaceExistedString(attrName, replaceText) {
if (params.length == 0) {
params += attrName + "=" + replaceText;
}

// 查找字符串key第一次出现的位置
var startIndex = params.indexOf(attrName);
// 如果没找到要找的值,直接返回
if (startIndex < 0) {
params += "&" + attrName + "=" + replaceText;
return;
} else {
// 如果不是-1，则要进行相应的操作,找到要替换的字符串所在的位置
var startReplaceIndex = startIndex + attrName.length + 1;
// 要截取的字符串之前的子串
var prefixString = params.substring(0, startReplaceIndex);
// alert("parmas = " + params);
// alert("params的长度是：" + params.length);

// 找到结束位置的位置
var endReplaceIndex = params.indexOf("&", startReplaceIndex);
// alert("endReplaceIndex = " + endReplaceIndex);

// 要截取的字符串之后的子串
// var postfixString = params.substr(endReplaceIndex, params.length);
// alert("postfixString = " + postfixString);

if (endReplaceIndex < 0) {
// var postfixString = params.substr(endReplaceIndex,
// params.length);
// alert(replaceText);
params = prefixString + replaceText;
return;
} else {
alert(params);
var postfixString = params.substr(endReplaceIndex, params.length);
// alert("postfixString = " + postfixString);
params = prefixString + replaceText + postfixString;
}
}
}

/** 拼接参数信息 */
function jointparams(serviceIdentify, attrName) {
// 在这里面要首先判断是否存在serviceIdentify = -1，就要提示要选择服务。
var b = judgeIfExistServiceIdentify(params, "serviceIdentify");
if (!b) {
alert("对不起，您得先选择制图的服务类型!");
$("#onlinegraph_dialog1").dialog({
height : 140,
modal : true,
buttons : {
"确定" : function() {
$(this).dialog("close");
}
}
});

val = "-1";
attrName = "serviceIdentify";
replaceExistedString(attrName, val);
} else {
// 第serviceIdentify个服务
var val = $(".service" + serviceIdentify + " #" + attrName).val();
replaceExistedString(attrName, val);
}

return params;
}

/**
* 判断一个字符串中是否含有某个字符串 targetStr:就是上面说的某个字符串 str:表示的就是上面说的一个字符串
*/
function judgeIfExistServiceIdentify(str, targetStr) {
var b = true;
var startIndex = str.indexOf(targetStr);
// 没有找到的时候返回的是负值
if (startIndex < 0) {
return b = false;
}

// 如果有这个key,但是没有值，或者为负值，则返回false
var startReplaceIndex = startIndex + targetStr.length + 1;
// 要截取的字符串之前的子串

// 找到结束位置的位置
var endReplaceIndex = params.indexOf("&", startReplaceIndex);
// 要截取的字符串之后的子串
// 如果后面没有接参数了,直接传递的是
if (endReplaceIndex > 0) {
// 截取到中间的字符串
var postfixString = params
.substring(startReplaceIndex, endReplaceIndex);
// 如果取到的是-1，表示还没有选择服务类型
if (postfixString == "-1") {
return b = false;
}
}

return b;
}

/** 如果下拉选出现了变化，那么改变相应的表单字段信息 */
function servicesOnSelected() {
// 判断是否选择了要做的产品类型
var b = judgeIfSelectedProduct();
// 请您先选择左侧要做的图形产品
if (!b) {
alert("您得先选择您要制作的图形产品才可以进行制作!");

// $("#onlinegraph_dialog2").dialog({
// height:140,
// modal:true,
// buttons:{
// "确定":function(){
// $(this).dialog("close");
// }
// }
// });

// 如果没有选择就不再继续执行了
return;
}

// 获取当前选中的option的serviceIdentify的值
var serviceIdentify = $("#services option:selected").attr("value");
var size = $("#services option").length;

// 将这个参数拼接到参数字符串中,不用判断params的长度，因为他肯定是第一步执行
params = "serviceIdentify=" + serviceIdentify;

jQuery.ajax({
type : 'POST',
url : basePath
+ "/onlinegraph/onlinegraph_serviceProducts.action",
data : {
'serviceIdentify' : serviceIdentify
},
success : function(re) {
// 通过这种方式将re转换成为json格式
// var json = eval(re);
// 获得某种服务能够做的产品数量
var length = re.serviceProductCodes.length;
// 删除服务类型中的请选择的option
$("#services option[value='-1']").remove();

// 通过循环的方式改变form表单的样式
for (var i = 0; i < size; i++) {
var temp = i + 1;
// 如果选中的是当前的option
if (serviceIdentify == temp) {
// 让当前option对应的那些字段都显示
// $(".service" + temp).css("display","block");
$(".service" + temp).show();
// 让当前option对应的那些input字段可用
// $(".service" + temp + "
// input").removeAttr("disabled");
// 得到下拉选对象
// var productionNameElement = $("#productionName");

// 删除原来的下拉选
$(".service" + temp + " #productionName option")
.remove();
// 添加一个”请选择“的提示下拉选
var $option = $("<option></option>");
// 设置option对象的value值
$option.attr("value", "");
// 设置option对象的text值
$option.text("请选择......");
$(".service" + temp + " #productionName")
.append($option);

// 显示产品的下拉菜单
for (var j = 0; j < length; j++) {
var $option = $("<option></option>");
// 设置option对象的value值
$option.attr("value",
re.serviceProductCodes[j].code);
// 设置option对象的text值
$option
.text(re.serviceProductCodes[j].productName);
$(".service" + temp + " #productionName")
.append($option);
}
} else {
// 如果不是被选中的那一项，将没被选中的那一项不显示，让没有被选中的那一项的
$(".service" + temp).hide();
// $(".service" + temp + "
// input").attr("disabled","disabled");
}
}
},
error : function() {
alert("error");
}
});
}

/** 控制点击分类的时候效果 */
function expand(el) {
var childObj = document.getElementById("child" + el);

if (childObj.style.display == 'none') {
childObj.style.display = 'block';
} else {
childObj.style.display = 'none';
}
return;
}

/** 点击产品的链接的时候让所在的table收缩 */
function expandAll(el) {
var childObj = document.getElementById("child" + el);

if (childObj.style.display == 'none') {
childObj.style.display = 'block';
}
return;
}

/** 点击左侧菜单实现异步提交 */
function listProductServiceParams(code) {
jQuery.ajax({
type : 'POST',
url : basePath + "/onlinegraph/onlinegraph_onLineGraph.action",
data : {
'code' : code
},
success : function(re) {
// 让原来的那个表单隐藏
// $("#serviceForm1").addClass("serviceForm1");
$("#serviceForm1").remove();
$('#serviceForm').html(re);

$input = $("<input></input>");
$input.attr("type", "hidden");
$input.attr("value", code);
$input.attr("id", "code");
$input.attr("name", "code");
$("#onLineGraphForm").append($input);
},
error : function() {
alert("error");
}
});
}

/** 点击左侧菜单实现异步提交 */
function onLineGraphUI() {
jQuery.ajax({
type : 'POST',
url : basePath
+ "/onlinegraph/onlinegraph_onLineGraphUI.action",
success : function(re) {
$("#serviceForm1").addClass("serviceForm1");
$("#serviceForm").html(re);
},
error : function() {
alert("error");
}
});
}

/** 用于显示左侧树形结构的产品 */
function treeProducts(treeNodePkId) {
jQuery.ajax({
type : 'POST',
url : basePath + "/onlinegraph/onlinegraph_treeProducts.action",
data : {
'treeNodePkId' : treeNodePkId
},
success : function(re) {
var json = eval(re);
// 得到某种类型下的产品个数
var length = json.treeProducts.length;
// alert(json.treeProducts.length);

// 先清除原来的内部的tr
$("#child" + treeNodePkId + " tr").remove();
// alert($("#child"+json.treeProducts[treeNodePkId].parentId+"
// tr[id='product'] td").length);

for (var i = 0; i < length; i++) {
// 创建一个tr
$tr = $("<tr></tr>");
$tr.attr("id", "product");

// 创建第一个td
$firstTd = $("<td></td>");
$firstTd.attr("height", "27");
$firstTd.attr("width", "18");
// 创建第一个td内部的div
$firstTdDiv = $("<div></div>");
$firstTdDiv.attr("align", "center");
$firstTdDiv.text(">");
// 将div放到td内部
$firstTd.append($firstTdDiv);
// 将第一个td放到tr内部
$tr.append($firstTd);

// 创建第二个td
$secondTd = $("<td></td>");
$secondTd.attr("width", "144");
// 创建a标签
$a = $("<a></a>");
$a.attr("onclick", "expandAll("
+ json.treeProducts[i].parentId + ")");
$a.attr("href", "javascript:listProductServiceParams('"
+ json.treeProducts[i].code + "')");
$a.text(json.treeProducts[i].name);
// 将<a></a>添加到第二个td里面
$secondTd.append($a);
// 将第二个td放到tr里面
$tr.append($secondTd);

// 将tr放到table里面
$("#child" + json.treeProducts[i].parentId).append($tr);
}
},
error : function() {
alert("error");
}
});
}

/** 点击生成图形是所做的操作 */
function clickOnLineGraph() {
var b = judgeIfExistServiceIdentify(params, "serviceIdentify");
// alert("是否选择了服务：" + b);

// 如果选择了服务类型
if (b) {
//alert("取到的code的值是：" + $("#onLineGraphForm #code").attr("value"));
// 取到code的值
var code = $("#onLineGraphForm #code").attr("value");

//alert("获取到的参数的值是：" + params);

$('#onLineGraphForm').showLoading();

jQuery.ajax({
type : "POST",
url : basePath
+ "/onlinegraph/onlinegraph_generateGraph.action",
data : params,
success : function(re) {
// setTimeout(
// "jQuery('#onLineGraphForm').hideLoading()", 1000 );
$('#onLineGraphForm').hideLoading();
// 显示页面上的图片

// alert("图形产品的路径:" + re.storageFilePath);

$img = $("#onLinePic img");
if($img != null){
$img.attr("src", ((re.storageFilePath == null) ?
basePath +"/images/nodata.jpg":
basePath +"/images/" + re.storageFilePath));

}

//做一个隐藏的域，将图片的保存地址保存起来
$storageFilePath = $("#onLinePic #storageFilePath");
if($storageFilePath != null){
$("#onLinePic #storageFilePath").attr("value",
(re.storageFilePath == null)?"":re.storageFilePath);
}

},
error : function(XMLHttpRequest, textStatus, errorThrown) {
// "jQuery('#onLineGraphForm').hideLoading()", 10000 );
$('#onLineGraphForm').hideLoading();
alert("error===" + errorThrown);
alert("这里要处理错误信息，将跳转到错误页面!");
}
});
} else {
return;
}
}

/**
* 此方法用于判断用后是否选择了自己要制作的文字产品 如果没有选择自己要制作的文字产品，一直提示这个信息
*/
function checkcondition() {
// 判断是否选择了要做的产品类型
var b = judgeIfSelectedProduct();
// 请您先选择左侧要做的图形产品
if (!b) {
alert("您得先选择您要制作的图形产品才可以进行制作!");

// $("#onlinegraph_dialog2").dialog({
// height:140,
// modal:true,
// buttons:{
// "确定":function(){
// $(this).dialog("close");
// }
// }
// });

// 如果没有选择就不再继续执行了
return;
}
}

/** 保存图片 */
function savepic(){
//alert("存储路径的值是：" + $("#onLinePic #storageFilePath").attr("value"));
//获取图片的存储路径值
var storageFilePath = $("#onLinePic #storageFilePath").attr("value")
//alert(typeof(storageFilePath));
//alert("storageFilePath = " + storageFilePath);
//获取产品的code的值
var code = $("#onLineGraphForm #code").attr("value");
//alert("code = " + code);

//如果没有生成图片，提示没有生成图片
if(storageFilePath == ""){
alert("对不起，您还没有要保存的图片,请您先进行图形产品制作!");
} else {
$('#onLinePic').showLoading();
jQuery.ajax({
type:"POST",
url:basePath + "/onlinegraph/onlinegraph_savepic.action",
data:{"storageFilePath":storageFilePath,'code':code},
success:function(re){
$('#onLinePic').hideLoading();
alert("提示信息为：" + re.msgMap.msg);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
$('#onLinePic').hideLoading();
alert("error");
}
});
}
}

/** 在加载完之后立即执行的参数 */
$(window).load(function() {
// 获得服务标识信息
var serviceIdentify = $("#services option:selected").attr("value");

$img = $("<img/>");
$img.attr("src",basePath +"/images/nodata.jpg");
$img.attr("width", 442);
$img.attr("height", 356);
$("#onLinePic").append($img);

$input = $("<input></input>");
$input.attr("type", "hidden");
$input.attr("value", "");
$input.attr("id", "storageFilePath");
$input.attr("name", "storageFilePath");
$("#onLinePic").append($input);

if (serviceIdentify == "-1") {
//alert("页面打开的时候执行，serviceIdentify = " + serviceIdentify);

// 服务标识为:serviceIdentify
params = "serviceIdentify=" + serviceIdentify;
params += "&productionName=" + $("#productionName").val();
//alert("params = " + params);

$(".service" + serviceIdentify + " input").each(
function(index, inputEle) {
this.params += "&" + $(this).attr("name") + "="
+ $(this).val();
});
return;
} else {
//alert("页面打开的时候执行，serviceIdentify = " + serviceIdentify);
// 服务标识为:serviceIdentify
params = "serviceIdentify=" + serviceIdentify;
params += "&productionName=" + $("#productionName").val();
//alert("params = " + params);

$(".service" + serviceIdentify + " input").each(
function(index, inputEle) {
this.params += "&" + $(this).attr("name") + "="
+ $(this).val();
});
}
})