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

时间:2015-08-14 17:13:15

标签: javascript jquery ajax

使用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

4 个答案:

答案 0 :(得分:3)

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。

答案 1 :(得分:1)

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

  

我如何只创建<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

答案 2 :(得分:0)

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

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/

答案 3 :(得分:0)

如果您可以为正在创建的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);
            }
        }