Ajax 获取后台数据后，前端如何进行处理

接上篇如何用jQuery Ajax访问后台API，获取数据之后如何在前端使用拿到的数据。这篇博客我要分享的是如何操纵数据，以及在这个过程中遇到的坑和解决办法。

少啰嗦，先看代码

$.get("/Index/getsubject/" + grade_id, function (data) {
            console.log(data);
            //var name =data[0].subject1;
            for (var x in data) {
                console.log(data[x].subject1);
                var sub = $("<li></li>").text(data[x].subject1);
                $("#choosesub ul").append(sub);
            }
        })

上篇文章只是测试了下有没有拿到数据库数据，而且之前写的alert(data+status)还是错的，因为data是json对象，而status是字符串，字符串的连接会把前者也变为字符串。所以不能滥用"+"号。此外，由于我的后台API返回的数据已经是json，所以不需要再用parse对其进行转换为json对象操作。可以直接访问对象里的值了。

有两种方法来访问json对象的值，在这里因为我的是数组对象，所以使用data[x].subject1来对数据进行访问（subject1是我数据库的科目字段名），然后后面就使用jQuery的append方法插入到目标处。

myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name;

myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj["name"];

添加DOM节点的三种方法，各取所需。

var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3);        // 追加新元素

我业务上遇到的另外一个坑也在这里分享下，因为我的下拉栏是由ul制作成的，其中多个li包含一个span元素，若是用jQuery选择器选择选中的span元素获取其中所需id，会因为span非唯一而导致不能得到选中span的ID，解决方法是使用event对象，里面有个target属性（也有currentTarget属性，在这里不深究），target里面有个dataset属性，记录了点击元素的data-*值，最终顺利拿到所需Id，

错误的取Id方法，"$("#choosegrade ul li span").attr("data-id");"这样能取到，但不是想要的。正确操作，"var grade_id = event.currentTarget.dataset.id;" 。

感谢大哥指导。

--------------------------------------------------------------------

由于测试不够完善，上面的代码bug，当重复点击选取年级时，每个年级的科目会累加，所以需要在遍历前清楚上一次获取的科目数据，所以最后完善的代码应如下所示。

    //获取年级和科目的数据
    $("#choosegrade ul li span").click(function (event) {
        var grade_id = event.currentTarget.dataset.id;
        $.get("/Index/getsubject/" + grade_id, function (data) {
            $("#choosesub ul").empty();
            for (var x in data) {
                var sub  = $("<li></li>").text(data[x].subject1);
                var child=$('#choosesub ul').children().length;
                console.log(child);
                $("#choosesub ul").append(sub);
            }
        })
    })

Ajax 获取后台数据后，前端如何进行处理

猜你喜欢