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

使用JavaScript，如何获得AJAX请求并只创建一次div？正如您在本例中所看到的，每次单击按钮时都会收到AJAX请求，并且还会创建div：

HTML：

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

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

？

创建一个检查来检查它是否已经运行

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;
    }

}

演示：

jQuery提供的方法正好用于此目的：它在事件第一次触发后解除绑定事件：

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

如果您可以将

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);
            }
        }

---

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

如何只创建一次

对此，我建议您在

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.";
}

---

.

为什么要使用内联绑定而不是$（“按钮”）。一个（“单击”，测试）我不确定哪一个是最好的方法。虽然这是一个解决方案，但这并不能促进最佳方法。是的，我们也可以绑定事件，一旦它触发，然后解除绑定该事件，但我认为应该进行一些检查来测试它是否已经运行选择器是一个id，而它应该是一个标记（根据html），他应该在html中添加一个id，这不应该被逐字逐句地接受我同意。但这可能（我认为会）造成混乱，以防用户试图使用它。我喜欢这两种解决方案，尤其是第二种，因为它也禁用了按钮。谢谢。

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;
}