Question

<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代码以获得相同的输出？

Answer 1

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

＆＃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;

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

1 个答案: