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

  • 相关阅读:
    教你怎样做个有“钱”途的測试project师
    使用具体解释及源代码解析Android中的Adapter、BaseAdapter、ArrayAdapter、SimpleAdapter和SimpleCursorAdapter
    html-上左右布局方式---ShinePans
    POJ1502 MPI Maelstrom Dijkstra
    Angry IP Scanner 获取设备的IP
    【Struts2学习笔记(12)】Struts2国际化
    使用SQL Profile及SQL Tuning Advisor固定运行计划
    sage开发url替换字符串
    柯塔娜大合唱,互联网安全观
    vim水平摆放全部窗体的三个方法
  • 原文地址:https://www.cnblogs.com/james1207/p/3423975.html
Copyright © 2020-2023  润新知