Jquery学习之Ajax

Posted 2020-10-05

Ajax:Async json and xml

1.追加html

.load();

$(document).ready(function () {
    $(‘#letter-a a‘).click(function (e) {
        e.preventDefault();//取消a点击的默认操作
        $(‘#dictionary‘).load(‘a.html‘);
        alert(‘Loaded!‘);//其实是异步的，数据没加载显示，便已经弹出
    })
});

2.操作json

$.getJSON() ;

$(‘#letter-b a‘).click(function (e) {
    e.preventDefault();
    //$.getJSON(‘b.json‘);
    //当单击按钮时，我们看不到以上代码的效果。
    //因为虽然函数调用加载了文件，但是并没有告诉javascript对返回的数据如何处理。
    //为此，我们需要使用一个回调函数。
    $.getJSON(‘b.json‘, function (data) {
        var html = ‘‘;
        $.each(data, function (entryIndex, entry) {
            html += ‘<div class="entry">‘;
            html += ‘<h3 class="term">‘ + entry.term + ‘</h3>‘;
            html += ‘<div class="part">‘ + entry.part + ‘</div>‘;
            html += ‘<div class="definition">‘ + entry.definition + ‘</div>‘;
            html += ‘</div>‘;
        });
        $(‘#dictionary‘).html(html);
    })
});