使用js的ajax方法讀取txt文本里面的JSON數據並追加到Html元素節點上

list.txt內容:

[  
{"optionKey":"1", "optionValue":"Canon in D"},  
{"optionKey":"2", "optionValue":"Wind Song"},  
{"optionKey":"3", "optionValue":"Wings"}  
]  


javascript內容:

   <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $.ajax({
                type: "GET",
                url: "Content/list.txt",
                dataType: "json",
                success: function (data) {
                    console.info(data);
                    for (var i = 0; i < data.length; i++) {
                        var trTD = "<tr><td>" + data[i].optionKey + "</td><td>" + data[i].optionValue + "</td></tr>";
                        $("#tb").append(trTD);
                    }
                }
            });
        });
    </script>




html內容:

        <div>
        <table id="tb"><tr><td>第一個</td><td>第二個</td></tr></table>
        <input id="button" type="button" value="O(∩_∩)O"/>
    </div>



備註:這裏面的ajax請求必須是GET方式,原因是在這裏POST方法是不被允許的(405)HTTP 405 錯誤 – 方法不被允許 (Method not allowed)

詳情參閱下面的網址:http://www.checkupdown.com/status/E405_cn.html


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章