关于服务器读取Ajax的使用。

昨天主要完成服务器左侧栏的动态生成的编写，记录在此：
主要完成了三个函数的编写，两个Ajax函数和一个列表生成函数，代码如下：

                $.ajax({                    type:"post",                    dataType:"json",                    url:"1.json",                    success:function (data) {  //这个函数用来生成代码                  for(var i=0;i<data.length;i++){                      ShowList(data[i]);                  }                    },                    error:function () {                        alert("ERROR!");                    }                });

            $.ajax({                type:"post",                dataType:"json",                url:"1.json",                success:function (data) { //这个函数用来为Overviewt添加行为                        $("a.Overview").click(function () {                            for(var i =0;i<data.length;i++) {                                if (this.getAttribute("id") == data[i].id) {                                    var APItitlename = data[i].packageName;                                    var packageDes = data[i].packageDes;                                    break;                                }                            }                            var conText ="";                            conText += "<h1>" + APItitlename +"</h1>";                            conText += "<p>" + packageDes + "</p>";                            $("#body-content").html(conText);                        })                },                error:function () {                    alert("ERROR!");                }            });

        function ShowList(ListData) {    //生成列表的函数            var OverviewID = ListData.id;            var conText = "";            conText += "<li class ='api apiLevel-";            conText += ListData.apiLevel;            conText += "'><a href='#' class='dac-reference-nav-toggle dac-closed' onclick='toggleNextUl(this); event.preventDefault();'> ";            conText += ListData.packageName;            conText += "</a>";            conText += "<ul class='dac-reference-nav-resources' style='display:none;'>";            conText += "<li><a href='#' class = 'dac-reference-nav-resource Overview' id = "+ ListData.id +">Overview</a></li>";            /*if(interfaces)*/            /*class*/            /*ex*/            conText +="</ul></li>"            $("#List").append(conText);        };

第一个Ajax函数，负责读取服务器数据，让根据数据，生成列表的代码。
第二个Ajax函数，是通过读取服务器数据，然后根据数据匹配，为Overview赋予相应的行为。主要是通过Overview的ID去匹配服务器数据的ID。
ShowList函数留了三个行注释为以后的工作做准备。

完成后如图：

插入和替换页面的行为

插入函数用了$(*).append(*)，而把页面内容替换则用了$(*).html(*)。
对于插入函数，有内插和外插两种方法。这两种又分别对应了前插与后插。方法如下所示：

$(*).append(*)   //内后插$(*).prepend(*); //内前插$(*).after(*);   //外后插$(*).before(*);  //外前插

用画图画了一个简单图解：

ShowList

这里最费劲的是ShowList的编写。过程中出了很多的错误。一番下来，大概对代码生成conText要注意的是，数值要单独摘出来，而函数不需要。仔细确认引号的对应，不要管WebStorm的显示，有点问题。
另外这里要注意的是，toggleNextUl函数操作的对象是next，next表示遍历下一个兄弟，在这里，this代表的<a>元素，而不是前门的<li>元素。<a>元素与<li>元素是父子关系而不是兄弟关系，只有</li>的下一个元素才是<li>的兄弟元素。

Json数据

这是我自己编写的Json数据。其对格式有着很高的要求，可以去校验网址进行校验。