javascript - 获取 AJAX 请求并仅创建一次 div

Question

使用 JavaScript，如何获取 AJAX 请求并仅 创建一次 div？正如您在此示例中看到的，每次单击按钮时都会收到 AJAX 请求，并且还会创建 div:http://jsfiddle.net/2uvms99o/

HTML:

<button onclick="test();">Press Me</button>

JavaScript:

function test() {
    $.ajax({
        url: 'https://storage.googleapis.com/maps-devrel/google.json',
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        async: false,
        success: function (data) {
            var div = document.createElement('div');
            div.innerHTML = 'This is a div!';
            document.body.appendChild(div);
        }
    });
}

也许有比 onclick 更好的方法？

Answer 1

jQuery 提供 $.fn.one完全用于此目的的方法:它在第一次触发后取消绑定(bind)事件:

$('button').one('click', function() {
    $.ajax({
        url: 'https://storage.googleapis.com/maps-devrel/google.json',
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        async: false,
        success: function (data) {
            var div = document.createElement('div');
            div.innerHTML = 'This is a div!';
            document.body.appendChild(div);
        }
    });
});

这也是首选方法，因为您不使用突兀的内联事件处理程序属性，从而保持 HTML 干净。只需确保使用更具体的 CSS 选择器(通过 id、类、父级等)绑定(bind)此事件，您不希望页面上的所有按钮在点击时创建 div。