关于服务器读取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数据。其对格式有着很高的要求，可以去校验网址进行校验。