您的位置:首页 > Web前端 > JQuery

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

2013-11-14 17:01 344 查看
/**

 * 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();

    });

 }

})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐