1

Задание: перенести текстовую информацию из блоков one и two в файл формата json, и чтобы была возможность менять ее в этом файле json. То есть чтобы меняя текст в json он добавлялся или изменялся и в .html

мы добавляем в json файл например вместо "one one one" текст "rantext" и оно должно изменить и html файл. Нужно переделать просто html файл в html, который будет брать текстовые данные из файла json и класть их в определенный блок

Надеюсь понятно объяснил

Помогите с этим Hello World'ом

<section class="one-section">
    <div class="one">one one one</div>
</section>

<section class="two-section">
    <div class="two">two two two</div>
</section>
2
  • 1
    Надеюсь понятно объяснил - вообще не совсем. Что в итоге должно получиться?
    – Grundy
    Commented 29 нояб. 2016 в 19:14
  • @Bulson так бывает, что автор не ставит галочку. Ничего страшного )
    – Nick Volynkin
    Commented 12 февр. 2017 в 7:27

1 ответ 1

3

Вот так можно:

js:

 var settings;

 function init() {
   loadJSON(function(response) {
     settings = JSON.parse(response);
   });
   document.getElementsByClassName('one')[0].innerHTML = settings.one;
   document.getElementsByClassName('two')[0].innerHTML = settings.two;
 }

 function loadJSON(callback) {   
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'settings.json', true);
    xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        callback(xobj.responseText);
      }
    };
    xobj.send(null);  
 }

json (settings.json лежит рядом с js):

{"one":"one one one", "two":"two two two"}

P.S Если вы используете jquery, то там есть специальный метод для получения json из файла:

 $.getJSON('settings.json', function(response){
       settings = JSON.parse(response);
 })
1
  • В итоге был выбран такой ход действий: в html файл в head в скриптовый тег добавляем следующий код: $(document).ready(function() { $.getJSON('result.json', function(jd) { $('#features3').html('<p> ' + jd.features3 + '</p>'); }); }); дальше ниже(уже в body) в этом же html файле добавляем пустой блок( в нем будет отображаться текст из result <div class="text_intro" id="features3"></div> файл result.json { "features3":"Interdum et malesuada fames ac ante..." } За отклик спасибо большое Commented 5 февр. 2017 в 6:41

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.