项目中的一个JQuery ajax实现案例
/**
?* brief 這些代碼用于在線制圖中 attention author <list of authors> <date> begin modify by
?* null
?*/
/** 獲取參數(shù)并拼接參數(shù) */
var params = "";
/** 判斷是否選擇了要制作的圖形產(chǎn)品 */
function judgeIfSelectedProduct() {
?var b = false;
?var length = $("#serviceForm #code").length;
?// alert("選擇的圖形產(chǎn)品是：" + length);
?if (length <= 0) {
??b = false;
?} else {
??b = true;
?}
?return b;
}
/** 拼接不存在的，替換存在的 */
function replaceExistedString(attrName, replaceText) {
?if (params.length == 0) {
??params += attrName + "=" + replaceText;
?}
?// 查找字符串key第一次出現(xiàn)的位置
?var startIndex = params.indexOf(attrName);
?// 如果沒(méi)找到要找的值,直接返回
?if (startIndex < 0) {
??params += "&" + attrName + "=" + replaceText;
??return;
?} else {
??// 如果不是-1，則要進(jìn)行相應(yīng)的操作,找到要替換的字符串所在的位置
??var startReplaceIndex = startIndex + attrName.length + 1;
??// 要截取的字符串之前的子串
??var prefixString = params.substring(0, startReplaceIndex);
??// alert("parmas = " + params);
??// alert("params的長(zhǎng)度是：" + params.length);
??// 找到結(jié)束位置的位置
??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;
??}
?}
}
/** 拼接參數(shù)信息 */
function jointparams(serviceIdentify, attrName) {
?// 在這里面要首先判斷是否存在serviceIdentify = -1，就要提示要選擇服務(wù)。
?var b = judgeIfExistServiceIdentify(params, "serviceIdentify");
?if (!b) {
??alert("對(duì)不起，您得先選擇制圖的服務(wù)類型!");
??$("#onlinegraph_dialog1").dialog({
?????height : 140,
?????modal : true,
?????buttons : {
??????"確定" : function() {
???????$(this).dialog("close");
??????}
?????}
????});
??val = "-1";
??attrName = "serviceIdentify";
??replaceExistedString(attrName, val);
?} else {
??// 第serviceIdentify個(gè)服務(wù)
??var val = $(".service" + serviceIdentify + " #" + attrName).val();
??replaceExistedString(attrName, val);
?}
?return params;
}
/**
?* 判斷一個(gè)字符串中是否含有某個(gè)字符串 targetStr:就是上面說(shuō)的某個(gè)字符串 str:表示的就是上面說(shuō)的一個(gè)字符串
?*/
function judgeIfExistServiceIdentify(str, targetStr) {
?var b = true;
?var startIndex = str.indexOf(targetStr);
?// 沒(méi)有找到的時(shí)候返回的是負(fù)值
?if (startIndex < 0) {
??return b = false;
?}
?// 如果有這個(gè)key,但是沒(méi)有值，或者為負(fù)值，則返回false
?var startReplaceIndex = startIndex + targetStr.length + 1;
?// 要截取的字符串之前的子串
?// 找到結(jié)束位置的位置
?var endReplaceIndex = params.indexOf("&", startReplaceIndex);
?// 要截取的字符串之后的子串
?// 如果后面沒(méi)有接參數(shù)了,直接傳遞的是
?if (endReplaceIndex > 0) {
??// 截取到中間的字符串
??var postfixString = params
????.substring(startReplaceIndex, endReplaceIndex);
??// 如果取到的是-1，表示還沒(méi)有選擇服務(wù)類型
??if (postfixString == "-1") {
???return b = false;
??}
?}
?return b;
}
/** 如果下拉選出現(xiàn)了變化，那么改變相應(yīng)的表單字段信息 */
function servicesOnSelected() {
?// 判斷是否選擇了要做的產(chǎn)品類型
?var b = judgeIfSelectedProduct();
?// 請(qǐng)您先選擇左側(cè)要做的圖形產(chǎn)品
?if (!b) {
??alert("您得先選擇您要制作的圖形產(chǎn)品才可以進(jìn)行制作!");
??// $("#onlinegraph_dialog2").dialog({
??// height:140,
??// modal:true,
??// buttons:{
??// "確定":function(){
??// $(this).dialog("close");
??// }
??// }
??// });
??// 如果沒(méi)有選擇就不再繼續(xù)執(zhí)行了
??return;
?}
?// 獲取當(dāng)前選中的option的serviceIdentify的值
?var serviceIdentify = $("#services option:selected").attr("value");
?var size = $("#services option").length;
?// 將這個(gè)參數(shù)拼接到參數(shù)字符串中,不用判斷params的長(zhǎng)度，因?yàn)樗隙ㄊ堑谝徊綀?zhí)行
?params = "serviceIdentify=" + serviceIdentify;
?jQuery.ajax({
????type : 'POST',
????url : basePath
??????+ "/onlinegraph/onlinegraph_serviceProducts.action",
????data : {
?????'serviceIdentify' : serviceIdentify
????},
????success : function(re) {
?????// 通過(guò)這種方式將re轉(zhuǎn)換成為json格式
?????// var json = eval(re);
?????// 獲得某種服務(wù)能夠做的產(chǎn)品數(shù)量
?????var length = re.serviceProductCodes.length;
?????// 刪除服務(wù)類型中的請(qǐng)選擇的option
?????$("#services option[value='-1']").remove();
?????// 通過(guò)循環(huán)的方式改變form表單的樣式
?????for (var i = 0; i < size; i++) {
??????var temp = i + 1;
??????// 如果選中的是當(dāng)前的option
??????if (serviceIdentify == temp) {
???????// 讓當(dāng)前option對(duì)應(yīng)的那些字段都顯示
???????// $(".service" + temp).css("display","block");
???????$(".service" + temp).show();
???????// 讓當(dāng)前option對(duì)應(yīng)的那些input字段可用
???????// $(".service" + temp + "
???????// input").removeAttr("disabled");
???????// 得到下拉選對(duì)象
???????// var productionNameElement = $("#productionName");
???????// 刪除原來(lái)的下拉選
???????$(".service" + temp + " #productionName option")
?????????.remove();
???????// 添加一個(gè)”請(qǐng)選擇“的提示下拉選
???????var $option = $("<option></option>");
???????// 設(shè)置option對(duì)象的value值
???????$option.attr("value", "");
???????// 設(shè)置option對(duì)象的text值
???????$option.text("請(qǐng)選擇......");
???????$(".service" + temp + " #productionName")
?????????.append($option);
???????// 顯示產(chǎn)品的下拉菜單
???????for (var j = 0; j < length; j++) {
????????var $option = $("<option></option>");
????????// 設(shè)置option對(duì)象的value值
????????$option.attr("value",
??????????re.serviceProductCodes[j].code);
????????// 設(shè)置option對(duì)象的text值
????????$option
??????????.text(re.serviceProductCodes[j].productName);
????????$(".service" + temp + " #productionName")
??????????.append($option);
???????}
??????} else {
???????// 如果不是被選中的那一項(xiàng)，將沒(méi)被選中的那一項(xiàng)不顯示，讓沒(méi)有被選中的那一項(xiàng)的
???????$(".service" + temp).hide();
???????// $(".service" + temp + "
???????// input").attr("disabled","disabled");
??????}
?????}
????},
????error : function() {
?????alert("error");
????}
???});
}
/** 控制點(diǎn)擊分類的時(shí)候效果 */
function expand(el) {
?var childObj = document.getElementById("child" + el);
?if (childObj.style.display == 'none') {
??childObj.style.display = 'block';
?} else {
??childObj.style.display = 'none';
?}
?return;
}
/** 點(diǎn)擊產(chǎn)品的鏈接的時(shí)候讓所在的table收縮 */
function expandAll(el) {
?var childObj = document.getElementById("child" + el);
?if (childObj.style.display == 'none') {
??childObj.style.display = 'block';
?}
?return;
}
/** 點(diǎn)擊左側(cè)菜單實(shí)現(xiàn)異步提交 */
function listProductServiceParams(code) {
?jQuery.ajax({
????type : 'POST',
????url : basePath + "/onlinegraph/onlinegraph_onLineGraph.action",
????data : {
?????'code' : code
????},
????success : function(re) {
?????// 讓原來(lái)的那個(gè)表單隱藏
?????// $("#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");
????}
???});
}
/** 點(diǎn)擊左側(cè)菜單實(shí)現(xiàn)異步提交 */
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");
????}
???});
}
/** 用于顯示左側(cè)樹(shù)形結(jié)構(gòu)的產(chǎn)品 */
function treeProducts(treeNodePkId) {
?jQuery.ajax({
????type : 'POST',
????url : basePath + "/onlinegraph/onlinegraph_treeProducts.action",
????data : {
?????'treeNodePkId' : treeNodePkId
????},
????success : function(re) {
?????var json = eval(re);
?????// 得到某種類型下的產(chǎn)品個(gè)數(shù)
?????var length = json.treeProducts.length;
?????// alert(json.treeProducts.length);
?????// 先清除原來(lái)的內(nèi)部的tr
?????$("#child" + treeNodePkId + " tr").remove();
?????// alert($("#child"+json.treeProducts[treeNodePkId].parentId+"
?????// tr[id='product'] td").length);
?????for (var i = 0; i < length; i++) {
??????// 創(chuàng)建一個(gè)tr
??????$tr = $("<tr></tr>");
??????$tr.attr("id", "product");
??????// 創(chuàng)建第一個(gè)td
??????$firstTd = $("<td></td>");
??????$firstTd.attr("height", "27");
??????$firstTd.attr("width", "18");
??????// 創(chuàng)建第一個(gè)td內(nèi)部的div
??????$firstTdDiv = $("<div></div>");
??????$firstTdDiv.attr("align", "center");
??????$firstTdDiv.text(">");
??????// 將div放到td內(nèi)部
??????$firstTd.append($firstTdDiv);
??????// 將第一個(gè)td放到tr內(nèi)部
??????$tr.append($firstTd);
??????// 創(chuàng)建第二個(gè)td
??????$secondTd = $("<td></td>");
??????$secondTd.attr("width", "144");
??????// 創(chuàng)建a標(biāo)簽
??????$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>添加到第二個(gè)td里面
??????$secondTd.append($a);
??????// 將第二個(gè)td放到tr里面
??????$tr.append($secondTd);
??????// 將tr放到table里面
??????$("#child" + json.treeProducts[i].parentId).append($tr);
?????}
????},
????error : function() {
?????alert("error");
????}
???});
}
/** 點(diǎn)擊生成圖形是所做的操作 */
function clickOnLineGraph() {
?var b = judgeIfExistServiceIdentify(params, "serviceIdentify");
?// alert("是否選擇了服務(wù)：" + b);
?// 如果選擇了服務(wù)類型
?if (b) {
??//alert("取到的code的值是：" + $("#onLineGraphForm #code").attr("value"));
??// 取到code的值
??var code = $("#onLineGraphForm #code").attr("value");
??//alert("獲取到的參數(shù)的值是：" + 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();
??????// 顯示頁(yè)面上的圖片
??????// alert("圖形產(chǎn)品的路徑:" + re.storageFilePath);
??????$img = $("#onLinePic img");
??????if($img != null){
???????$img.attr("src", ((re.storageFilePath == null) ?
????????? basePath +"/images/nodata.jpg":
????????? basePath +"/images/" + re.storageFilePath));
?????????
??????}
??????
??????//做一個(gè)隱藏的域，將圖片的保存地址保存起來(lái)
??????$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("這里要處理錯(cuò)誤信息，將跳轉(zhuǎn)到錯(cuò)誤頁(yè)面!");
?????}
????});
?} else {
??return;
?}
}
/**
?* 此方法用于判斷用后是否選擇了自己要制作的文字產(chǎn)品 如果沒(méi)有選擇自己要制作的文字產(chǎn)品，一直提示這個(gè)信息
?*/
function checkcondition() {
?// 判斷是否選擇了要做的產(chǎn)品類型
?var b = judgeIfSelectedProduct();
?// 請(qǐng)您先選擇左側(cè)要做的圖形產(chǎn)品
?if (!b) {
??alert("您得先選擇您要制作的圖形產(chǎn)品才可以進(jìn)行制作!");
??// $("#onlinegraph_dialog2").dialog({
??// height:140,
??// modal:true,
??// buttons:{
??// "確定":function(){
??// $(this).dialog("close");
??// }
??// }
??// });
??// 如果沒(méi)有選擇就不再繼續(xù)執(zhí)行了
??return;
?}
}
/** 保存圖片 */
function savepic(){
?//alert("存儲(chǔ)路徑的值是：" + $("#onLinePic #storageFilePath").attr("value"));
?//獲取圖片的存儲(chǔ)路徑值
?var storageFilePath = $("#onLinePic #storageFilePath").attr("value")
?//alert(typeof(storageFilePath));
?//alert("storageFilePath = " + storageFilePath);
?//獲取產(chǎn)品的code的值
?var code = $("#onLineGraphForm #code").attr("value");
?//alert("code = " + code);
?
?//如果沒(méi)有生成圖片，提示沒(méi)有生成圖片
?if(storageFilePath == ""){
??alert("對(duì)不起，您還沒(méi)有要保存的圖片,請(qǐng)您先進(jìn)行圖形產(chǎn)品制作!");
?} 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");
???}
??});
?}
}
/** 在加載完之后立即執(zhí)行的參數(shù) */
$(window).load(function() {
?// 獲得服務(wù)標(biāo)識(shí)信息
?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("頁(yè)面打開(kāi)的時(shí)候執(zhí)行，serviceIdentify = " + serviceIdentify);
??// 服務(wù)標(biāo)識(shí)為: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("頁(yè)面打開(kāi)的時(shí)候執(zhí)行，serviceIdentify = " + serviceIdentify);
??// 服務(wù)標(biāo)識(shí)為: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();
????});
?}
})
總結(jié)
以上是生活随笔為你收集整理的项目中的一个JQuery ajax实现案例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 汽车为什么启动不了？
- 下一篇： PowerDesigner将PDM导出生