备案控制台
开发者社区 开发与运维 文章 正文

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

2013-11-14 1007
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： /**  * brief 这些代码用于在线制图中 attention author <list of authors> <date> begin modify by  * null  */ /** 获取参数并拼接参数 */ var params = ""; /** 判断是否选择了要制作的图形产品 */ function judgeIfSelectedP

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

文章标签：
JavaScript
前端开发
数据格式
JSON
存储
关键词：
jQuery ajax
jQuery案例
ajax案例
ajax项目
ajax jquery
涂作权
目录
相关文章
N..
|
2月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
20 1
热烈的马
|
5月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery，html，ajax）附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery，html，ajax）附源码 超详细
热烈的马
62 0
穆雄雄.
|
2月前
|
前端开发 JavaScript
Ajax基本案例详解之$.ajax的实现
Ajax基本案例详解之$.ajax的实现
穆雄雄.
10 0
2019ab
|
2月前
|
JavaScript 前端开发
node.js第四天--ajax在项目中的应用
node.js第四天--ajax在项目中的应用
2019ab
27 0
左边的天堂
|
3月前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
左边的天堂
18 0
亚丁号
|
4月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
亚丁号
16 0
zrblue
|
4月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
zrblue
43 0
多加点香菜85
|
5月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
多加点香菜85
32 0
热烈的马
|
5月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例（超详细必看 附源码）
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例（超详细必看 附源码）
热烈的马
54 0
乌云上
|
前端开发 JavaScript 数据格式
jquery ajax超时设置
jquery ajax超时设置 var ajaxTimeoutTest = $.ajax({ 　　url:'', //请求的URL 　　timeout : 1000, //超时时间设置，单位毫秒 　　type : 'get', //请求方式，get或post 　　data :{}, //请求...
乌云上
1582 0

热门文章

最新文章

  • 1
    C# .NET面试系列八：ADO.NET、XML、HTTP、AJAX、WebService
  • 2
    asp.net ajax1.0基础回顾(四)：其它内置服务器端控件
  • 3
    PHP Ajax实现页面无刷新发表评论
  • 4
    Ajax Control Toolkit 34个服务器端控件(转载)
  • 5
    关于Ajax的实现
  • 6
    新瓶旧酒ASP.NET AJAX(7) - 客户端脚本编程（Sys命名空间下的类）
  • 7
    AJAX联手SOA 打造新一代Web服务应用程序
  • 8
    新瓶旧酒ASP.NET AJAX(3) - 客户端脚本编程（调试和跟踪）
  • 9
    Ajax数据传输的一个问题
  • 10
    怎样用Javascript停止或者启动AJAX Timer
  • 1
    jQuery模态框弹窗提示代码
    18
  • 2
    使用JavaScript、jQuery和Bootstrap构建待办事项应用
    15
  • 3
    jQuery实现二级菜单
    12
  • 4
    jQuery选择器 获取元素的十一种方式
    17
  • 5
    jQuery幸运大转盘抽奖活动代码
    34
  • 6
    JQuery样式操作、click事件以及索引值-选项卡应用示例
    23
  • 7
    jquery+css实现Tab栏切换的代码实例
    31
  • 8
    jquery实现二级导航下拉菜单效果实例
    22
  • 9
    目前最流行的一些前端框架：React、Angular、Vue.js和jQuery
    118
  • 10
    jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
    20

    • 相关课程

    更多
  • Ajax 前端开发入门与实战
  • jQuery开发教程
  • Ajax入门
  • JavaScript入门与实战
  • Vue.js 入门与实战
  • HTML5 新特性教程

    • 相关电子书

    更多
  • 23-Vue.js在前端...1506518547.pdf
  • Javascript异步编程
  • JavaScript异步编程

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • HTML及前端框架
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）