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方法：它在第一次触发事件后取消绑定事件：

$('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，class，parent等）绑定此事件，您不希望页面上的所有按钮都在点击时创建div。

Answer 2

我可以通过两种方式理解你的问题，第一种是：

我如何只创建<div>一次？

我建议您测试<div>函数中是否存在已创建的success元素，如果它已经存在则使用它，如果它不存在则创建它：

success: function (data) {

    // if the element with the id of 'ajaxResponse'
    // doesn't exist in the DOM:
    if (!document.getElementById('ajaxResponse')) {

        // we create the <div> element:
        var div = document.createElement('div');

        // give it the id that we're looking for:
        div.id = 'ajaxResponse';

        // append it to the document.body:
        document.body.appendChild(div);
    }

    // find the element we want to work with (the <div> we
    // created, above:
    var responseDiv = document.getElementById('ajaxResponse');

    // set its innerHTML:
    responseDiv.innerHTML = "This is a div.";
}

JS Fiddle demo;

替代方案是：

如何阻止启动多个ajax请求？

我建议您在成功功能中禁用<button>：

success: function (data) {
    var div = document.createElement('div');
    div.innerHTML = 'This is a div!';
    document.body.appendChild(div);

    // using document.querySelector, with a CSS attribute-
    // selector to select the first button with an 'onclick'
    // attribute; obviously change this to a selector
    // appropriate for use-case. And we then set the
    // disabled state to true (to prevent subsequent interaction):
    document.querySelector('button[onclick]').disabled = true;
}

JS Fiddle demo

Answer 3

创建一个检查以检查其已经运行

var run = true;
function test() {
    if(run){
    $.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);
        }
    });
        run = false;
    }

}

演示：http://jsfiddle.net/farhanbaloch/2uvms99o/1/

Answer 4

如果您可以为正在创建的id指定div，则可以在创建之前检查该元素是否已存在，

success: function (data) {
            if (!($("#myDiv").length)) {    // Check whether #myDiv exists
                var div = document.createElement('div');
                div.innerHTML = 'This is a div!';
                div.id = "myDiv";    // Specify an id for the div
                document.body.appendChild(div);
            }
        }

获取AJAX请求并仅创建一次Div

4 个答案: