项目中的一个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();
    });
 }
})