使用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
?
答案 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.";
}
替代方案是:
如何阻止启动多个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;
}
答案 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;
}
}
答案 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);
}
}