如何将ajax得来json数据快速展示到html代码中

1、后台程序生成json数据，不用拼接直接返回

2、ajax接收数据后，调用js解析json数据，可以利用jquery.parseJSON()方法解析

3、解析之后得到obj对象，然后可以直接obj.name这样获取对象属性

4、用html代码拼接

示例：

var obj = jQuery.parseJSON('{"name":"John","age":"20"}')

比如拼接为表格的tr

html = "<tr><td>" + obj.name + "</td><td>" + obj.age + "</td></tr>"

可以后台算好两个月的差值，然后提供api给前端ajax调用，这种做法是安全的，但会多发起一次请求，可能会有网络问题。

如果能确保软件的使用环境是安全的，或者数据是不敏感的，那么直接前端计算就好了，毕竟1、2月份的数据已经到前端。

前端做的话会面临一个问题，你的两次异步请求在不同的作用域，相互之间不能访问变量，且是异步，做全局变量也无法确保什么时候有值，所以你可能需要这个，纯手写的“异步控制器”。

var asyncController = function (callback, threadNum) {

    threadNum = ~~threadNum

    return this.init(callback,threadNum)

}

$.extend(asyncController.prototype, {

    threads: [],

    callback:function(){},

    init: function (callback, threadNum) {

        for (var i = 0 i < threadNum i++) {

            this.threads.push({ id: i, val: null })

        }

        this.callback = callback

        return this

    },

    addPoint: function (idx, data) {

        this.threads[idx].val = data,args=[]

        for (var i = 0 i < this.threads.length i++) {

            var info = this.threads[i]

            if (info.val !== null) {

                args.push(info)

            }

        }

        if (args.length >= this.threads.length) {

            this.callback.call(this, args)

        }

    }

})

使用方法

<div id = "table1">

<script>

//初始化控件对象，参数1，所有异步完成后的回调函数，参数2，开启的异步个数

var asyncCtl=new asyncController(function(a,b,c,d,e){

        debugger

        var args=arguments

        /*a或者args[0]表示1月的数据,

          b或args[1]表示2月的数据。

          参数的数据顺序由addPoint方法设置

         */

         

         //计算多个月份的差值逻辑....

},2)

$.getJSON('getdata.php',{'month':'1'}, function(json){

//异步控制器埋点 并设置参数的顺序。

asyncCtl.addPoint(0,json)

var htmls=['<table class="ui selectable celled table">'] 

htmls.push('<tr>')

for(var k in json[0]) htmls.push('<td>'+k+'</td>')

htmls.push('</tr>')

for(var i=0,L=json.lengthi<Li++){

htmls.push('<tr>')

for(var k in json[i]) htmls.push('<td>'+json[i][k]+'</td>') 

htmls.push('</tr>')

}

htmls.push('</table>')

$('#table1').html(htmls.join(''))})

</script>

</div>

<div id = "table2">

<script>

$.getJSON('getdata.php',{'month':'2'}, function(json){

//异步控制器埋点 并设置参数的顺序。

asyncCtl.addPoint(1,json)

var htmls=['<table class="ui selectable celled table">'] 

htmls.push('<tr>')

for(var k in json[0]) htmls.push('<td>'+k+'</td>')

htmls.push('</tr>')

for(var i=0,L=json.lengthi<Li++){

htmls.push('<tr>')

for(var k in json[i]) htmls.push('<td>'+json[i][k]+'</td>') 

htmls.push('</tr>')

}

htmls.push('</table>')

$('#table2').html(htmls.join(''))})

</script>

</div>

---