Ajax Загрузить больше контента
Я хочу загрузить контент из
/page-0.html?to-page=2, а моя текущая страница
/page-0.html?to-page=1.
Вот мой код:
$(document).ready(function() {
var page = 1;
$.get('/page-0.html?to-page=' +page, function(html) {
if (html) {
$('#result').append(html);
$('#more').text('Load More Post'); //add text "Load More Post" to button again
} else {
$('#more').text('No more Post to load'); // when last record add text "No more posts to load" to button.
}
$('#more').click(function() {
$('#more').html('<img src = "ajax-loader.gif"');
page += 1;
});
}, 'json');
});
html:
<div id = "result"></div> <button id = "more">Load more</button>
Если я нажму кнопку «Загрузить еще», URL-адрес должен измениться. /page-0.html?to-page=1 to 2. Возможно ли это?
Я новичок в jquery. Может ли кто-нибудь помочь мне найти здесь мою ошибку?
Ответы 1
Попробуй это:
$(document).ready(function() {
var page = 1;
var getData;
(getData = function() {
$.get('/page-0.html?to-page=' +page, function(html) {
if (html) {
$('#result').append(html);
$('#more').text('Load More Post'); //add text "Load More Post" to button again
} else {
$('#more').text('No more Post to load'); // when last record add text "No more posts to load" to button.
}
}, 'json');
})();
$('#more').click(function() {
$('#more').html('<img src = "ajax-loader.gif"');
page += 1;
getData();
});
});
Я использовал функцию getData в качестве IIFE, чтобы этот запрос автоматически выполнялся в первый раз, а затем вызывал ту же функцию позже, нажав еще. HTH
Это потому, что вы не добавили библиотеку JQuery Uncaught ReferenceError: $ не определен в pen.js: 9
проверьте это jsfiddle.net/iamaditya/3u582twx. Вам нужно будет проверить консоль или сеть
Я добавил code.jquery.com/jquery-3.3.1.min.js, но страница все равно не загружается ?
Откройте инструмент Chrome, обратите внимание, что запрос был получен, но заблокирован.
jquery-3.3.1.min.js: 2 Смешанное содержимое: страница «codepen.io/alx-ashique/pen/yxaoYa» была загружена по HTTPS, но запросила небезопасную конечную точку XMLHttpRequest «darkweb.wapkiz.mobi/page-0.html?to-page=3». Этот запрос заблокирован; контент должен обслуживаться по HTTPS. send @ jquery-3.3.1.min.js: 2 ajax @ jquery-3.3.1.min.js: 2 w. (анонимная функция) @ jquery-3.3.1.min.js: 2 getData @ pen.js: 6 (анонимно) @ pen.js: 19 отправка @ jquery-3.3.1.min.js: 2 года .handle @ jquery-3.3.1.min.js: 2
Если вы не знакомы с инструментами разработчика Chrome, обратитесь к developers.google.com/web/tools/chrome-devtools. Это поможет.
Я новичок в jquery и всем остальном. Я много пробовал, но у меня ничего не вышло. Итак, не могли бы вы дать мне рабочий сценарий, который справится с работой без каких-либо проблем. Я знаю, что мешаю вам, но пожалуйста, это просьба. ?
Вы тестировали код своего проекта? Код вроде работает, это просто из-за ограничений безопасности Codepen, Jsfiddle не разрешает попадание не-https-запросов. Я думаю, что код должен нормально работать на вашем сайте. Улучшенный код jsfiddle.net/iamaditya/3u582twx/16
Я проверил, что ваши коды все еще не работают ?darkweb.wapkiz.mobi/page-12.html
Я нашел другой код, который немного работает, но всякий раз, когда я нажимаю кнопку «Загрузить больше», он показывает мне ту же страницу вместо изменения номера страницы. function loadMore() { $("#loading").html('Loading...').show(); var currPage = 1; $.get('page-0.html?to-page?=' + currPage, function(html) { $("#results").append(html); $("#loading").hide(); }); } $(document).ready(function() { var currPage = 1; $("a.next").click(function() { currPage +=1; loadMore(); }); });
'var currPage = 1; function loadMore () {$ ("# загрузка"). html (' Загрузка ... '). show (); $ .get ('page-0.html? to-page? =' + currPage, function (html) {$ ("# results"). append (html); $ ("# loading"). hide (); }); } $ (документ) .ready (функция () {$ ("a.next"). click (function () {currPage + = 1; loadMore ();});}); '
Попробуйте переместить currPage в глобальную область видимости
Спасибо, но не работает ? codepen.io/alx-ashique/pen/yxaoYa