如何将AJAX代码实现为jquery代码

时间:2016-07-06 08:39:55

标签: javascript jquery ajax

<html>
<body>
<div id="demo"></div>
<button type="button" onclick="loadDoc()">Load Information</button>
<script>
function loadDoc() {
    var url = "http://www.json-generator.com/api/json/get/bTVHJMcarm?indent=2";
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState == 4) {
            var myTableDiv = document.getElementById("demo");
            var jsonObj = JSON.parse(request.responseText);
            var count = Object.keys(jsonObj).length;
            var table = document.createElement('TABLE');
            var tableBody = document.createElement('TBODY');
            table.appendChild(tableBody);

            for (i = 0; i < count; i++) {
                var tr = document.createElement('TR');
                tableBody.appendChild(tr);
                var keytd = document.createElement('TD');
                keytd.width = '50';
                keytd.appendChild(document.createTextNode(Object.keys(jsonObj)[i]));
                var valuetd = document.createElement('TD');
                valuetd.appendChild(document.createTextNode((jsonObj)[i]));
                tr.appendChild(keytd);
                tr.appendChild(valuetd);
            }

            myTableDiv.appendChild(table);
        }
    };

    request.open("GET", url, true);
    request.send();
}
</script>
</body>
</html>

我已经使用AJAX编写了这段代码来获取json的输出,如

0   apple
1   orange
2   banana
3   strawberry

当我运行此代码时,我得到的是与我提到的相同的输出。 那么我应该如何将此代码转换为jquery代码以获得相同的输出?

1 个答案:

答案 0 :(得分:0)

此代码的jQuery等效项是使用$.ajax以及按钮的不显眼的on()事件处理程序。在success处理程序中,您可以创建所需的元素,并使用text()appendTo()方法创建所需的HTML结构。像这样:

&#13;
&#13;
$('button').click(function() {
    $.ajax({
    	url: "http://www.json-generator.com/api/json/get/bTVHJMcarm?indent=2",
        success: function(json) {
            var $table = $('<table />').appendTo('#demo');
            for (var key in json) {
            	var $tr = $('<tr />').appendTo($table);
                $('<td />').text(key).appendTo($tr);
                $('<td />').text(json[key]).appendTo($tr);
            }
        }
    });
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo"></div>
<button type="button">Load Information</button>
&#13;
&#13;
&#13;