Как я могу сделать AJAX-приложение похожим на nodebb? - PullRequest
Новая
       2

Как я могу сделать AJAX-приложение похожим на nodebb?

0 голосов
/ 11 июня 2019

Я очень плохо знаком с Ajax и действительно борюсь.Моя конечная цель - создать программное обеспечение для форума, такое как nodebb.Я уже создал форум php, но решил не использовать его, потому что он казался старым, в отличие от быстро выглядящих форумов, таких как nodebb.Я пытаюсь понять, как создать несколько вкладок, каждая из которых отображает различную информацию, но сохраняет одинаковые данные для заголовка.Я понимаю, что это, вероятно, очень простая вещь, но в настоящее время я не могу этого сделать.https://dogecraft.net - отличный пример того, чего я пытаюсь достичь.

Если вы нажимаете на разные вкладки, он загружает информацию в каждую из них.Я пробовал это, но у меня были проблемы с URL.Когда я перезагружался, он просто загружал мой новый файл, и это не то, что мне нужно.

(Да, я использую локальный файл jquery. Jquery не проблема.)

IЯ пробовал w3schools, но не нашел действительно полезной информации

Я также пробовал много других веб-сайтов. 

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
  $( "#one" ).click(function(){
    $("#div1").load("/one/").hide().fadeIn();
    window.history.pushState("object or string", "Title", "/one/");
  });
});
$(document).ready(function(){
  $( "#two" ).click(function(){
    $("#div1").load("two.html").hide().fadeIn();

  });
});
</script>
</head>
<body>
<button id='one'>Page one</button> <button id='two'>Page two</button>
<h2>This text never changes :)</h2>
<div id="div1"></div>


</body>
</html>

Я хотел бы иметь домашнюю страницу index.html / phpМне нужна кнопка для загрузки одной страницы контента (one.html / php), а затем еще одна кнопка для загрузки другой страницы контента (two.html / php).

При обновлении я хотел бы сохранитьтот же контент, который был на главной странице, включая кнопки в заголовке.

1 Ответ

0 голосов
/ 11 июня 2019

Вы можете сделать Ajax-вызов вашего html / php, чтобы получить html-код, а затем внедрить содержимое в ваш div.Вот пример: 

$(document).ready(function() {
    $("#one").click(function() {
        $.ajax({
            url : 'http://myserver.com/myhtmlpage.html',
            success : function(html) {
                $("#div1").html(html);
            }
        });
    });
    $("#two").click(function() {
        $.ajax({
            url : 'http://myserver.com/myphppage.php',
            success : function(html) {
                $("#div1").html(html);
            }
        });
    });
});

Когда вы нажимаете кнопку, выполняется вызов ajax, и в случае успеха вызывается функция успеха.Первый параметр содержит HTML-код запрашиваемой вами веб-страницы.Затем вы можете использовать html-функцию jQuery, которую вы можете вставить в свой div.

Пара советов:

  • Возможно, вы захотите использовать только одну функцию onready, не нужнообъявите это несколько раз

  • Вы можете рассмотреть возможность возврата объекта json с данными вместо страницы php.Это будет полезно позже, если вы решите использовать такие фреймворки, как Angular или Vue.Если вы можете сгенерировать JSON-файл на вашем php, например:

    {"name": "John"}

Тогда вы можете сделать что-то вроде этого: 

    $("#two").click(function() {
        $.getJSON({
            url : 'http://http://myserver.com/myphppagethatservesjson.php',
            success : function(json) {
                $("#div1").html("<h1>My name is " + json.name + "</h1>");
            }
        });
    });

Затем будет отображено «Меня зовут Джон».

Это можно было бы значительно улучшить, но я надеюсь, что это поможет вам немного.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...