项目中的一个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();
????});
?}
})
總結
以上是生活随笔為你收集整理的项目中的一个JQuery ajax实现案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 汽车为什么启动不了？
- 下一篇： PowerDesigner将PDM导出生