Как сделать вызов AJAX для элемента html?

Question

Что я хочу сделать, это довольно просто. Я хочу сделать вызов AJAX для определенного класса html, так что всякий раз, когда загружается страница html, jquery сделает вызов AJAX для этого конкретного html div class.

Например:

<div class="targeted"></div> 

В JQuery:

$('.targeted') 

Я знаю, что синтаксис, чтобы сделать вызов AJAX является:

$.ajax({ 
     type: "GET", 
     url: "/api/something", 
     success: function(data) { 
      console.log(data); 
     } 
     }); 

Но как я могу осуществить эту AJAX звоните в $('.targeted') всякий раз, когда страница загружается?

Благодаря

Answer 1

Если вы имеете в виду вы хотите отобразить результат AJAX вызова в элементе, вы обновляете элемент из в success обратного вызова:

$.ajax({ 
    type: "GET", 
    url: "/api/something", 
    success: function(data) { 
     $('.targeted').html(data); 
    } 
}); 

Этого пример предполагает

1. Вы хотите заменить содержимое элемента (а не добавлять к нему); больше опций in the jQuery API.

2. data будет HTML. Если это обычный текст, используйте .text(data), а не .html(data). Если это структурированные данные, то, конечно, вам нужно будет сделать больше работы, чтобы поместить информацию в нужную форму.

Answer 2

Вы можете сделать:

$(function() { 
    $.ajax({ 
    type: "GET", 
    url: "/api/something", 
    }) 
    .done(function(data) { 
    $('.targeted').text(data); 
    }); 
}); 

Answer 3

window.onload = function() { 
    yourFunction(); 
}; 

function yourFunction(){ 
$.ajax({ 
    type: "GET", 
    url: "/api/something", 
    success: function(data) { 
     $('.targeted').html(data); 
    } 
}); 
} 

ИЛИ Drectly вы можете передать этот метод в документе готовый он будет выполняться автоматически

$(document).ready(function(){ 
//This will execute onload oof your web page what you required 
    yourFunction(); 
}) 

function yourFunction(){ 
$.ajax({ 
    type: "GET", 
    url: "/api/something", 
    success: function(data) { 
     $('.targeted').html(data); 
    } 
}); 
} 

Answer 4

Ибо, когда страница загружена, вы использование:

$(document).ready(function() { 
    console.log("ready!"); 
}); 

Внутри документа готовы, вы поместите свой вызов AJAX. Если в результате вы получите в формате JSON, вам необходимо включить DATATYPE, а так:

$.ajax({ 
    method: "GET", 
    url: "/api/something", 
    dataType: "json" 
}) 
    .done(function(data) { 
    $('.targeted').append(JSON.stringify(data)); 
    }); 

Если результат не JSON, то вы можете просто добавить данные.

Также отметим: jqXHR.success(), jqXHR.error() и jqXHR.complete() обратные вызовы удаляются от JQuery 3.0. Вместо этого вы можете использовать jqXHR.done(), jqXHR.fail() и jqXHR.always().

См. the jQuery documentation.

Answer 5

вы можете использовать JQuery load как это:

$(".targeted").load('/api/something'); 

если вы хотите ждать до тех пор пока после загрузки страницы, оберните его windowload так:

$(window).load(function() { 
    $(".targeted").load('/api/something'); 
}); 

P.S. $(window).load(..) и $(".class").load(url) - две разные функции.