接上篇如何用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);
            }
        })
    })