jQuery将AJX请求得到的数据赋值全局变量，并合并数据结果集到文本框

需求分析

直接上图：

上面分别是两个ajax请求得到的数据其中，数据的关联性为：上段数据的varName 等于下段数据的variableName! 现在我需要将这些数据合并到一个div并将值放入到input便签：
div：

代码实现

1. 将Ajax得到的data数据赋给全局变量

首先自定义一个空的全局变量值：

然后处理ajax请求：

关键一点就是讲ajax的异步加载关闭，更改为同步加载， 然后直接在响应成功函数中对全局变量直接进行赋值！这个时候的值就已经赋到了全局变量中！下面就是对两个不同的ajax数据进行数据合并操作！

2.不同ajax的数据合并

// 定义全局变量
var globalVariable = "";

core.submitAjax({
    url: 'trans/kettlevar/getParentLevelList',
    type: 'get',
    async : false,
    data: {
        parentLevelId: parentLevelId,
        parentLevelId2: parentLevelId2,
        parentLevelId3: parentLevelId3,
        parentLevelId4: parentLevelId4,
        kettleId: newValue,
        repType: repType
    },
    success: function(kettleVar){
        globalVariable = kettleVar;
    }
});

core.submitAjax({
    url: 'trans/kettlevar/getListJobGroups',
    type: 'get',
    data: {
        kettleId: newValue,
        repType: repType
    },
    success: function (data) {
        rederVarsGroups(globalVariable,data);
    }
});

上面将一个ajax数据通过全局变量赋值的方式加载到了下面的ajax函数的rederVarsGroups方法中：

// 渲染作业下作业组环境变量
    function rederVarsJob(kettleVar, jobData){
        // 根据名称排序
        kettleVar = kettleVar.sort(function(a, b){
            return a.varName.localeCompare(b.varName);
        });
        // 绑定变量值
        if(jobData){
			// 创建一个数组，用于合并两个结果集数据
            var array = [];
            for(var m in kettleVar){
                var varName = kettleVar[m].varName;
                var varDesc = kettleVar[m].varDesc;
                for(var i in jobData){
                    //var value = jobData[i];
                    var variableName = jobData[i].variableName;
                    var variableValue = jobData[i].variableValue;
					// 两组数据有关联关系，就是name是相同的
                    if (variableName == varName){
                        array.push({
                            varName: varName,
                            varDesc: varDesc,
                            value: variableValue
                        });
                    }
                }
            }
            if (kettleVar.length > array.length){
                var aarray = [];
                for (var m in array){
                    aarray.push(array[m].varName);
                }
                for (var h in kettleVar){
                    if (aarray.indexOf(kettleVar[h].varName)==-1){
                        array.push({
                            varName: kettleVar[h].varName,
                            varDesc: kettleVar[h].varDesc
                        });
                    }
                }
            }
            kettleVar = array;
        }
        //置空
		var $tagJobGroupVars = $("#tag-jobGroup-vars");  // 选择前面那个div容器，进行数据拼接
        $tagJobGroupVars.html('');
        for(var i in kettleVar){
            var value = kettleVar[i].value;
            var varName = kettleVar[i].varName;
            var varDesc = kettleVar[i].varDesc;
            value = (value === undefined || value === null) ? '' : value;
            var $line = $("<div class='form-group'></div>")
                .append("<label style='text-align: left;'>" + varName +"</label>")
                .append("<input disabled type='text' id='abc' name=\""+ varName +"\" value=\"" + value + "\"/><small> " + varDesc + "</small>")
            ;
            $tagJobGroupVars.append($line);
        }

    }

然后根据其关联性在遍历第一个ajax请求的循环中，将value值拼接到array数组中，最后通过jQuery的的拼接语法将input标签拼接到div容器中！实现效果如下：

其中输入框的值就是来自另一个ajax的value!
注意：在input标签加上disabled 属性可以实现只看无法修改的效果，效果如下：

我是这样做的其实还有几种方式可以参考以下链接：
https://blog.csdn.net/u010210251/article/details/49724193

以上就是全部内容，如有不对之处，请指出，我们共同成长！！