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
    29 ноя 2016 в 19:14
  • @Bulson так бывает, что автор не ставит галочку. Ничего страшного )
    – Nick Volynkin
    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..." } За отклик спасибо большое 5 фев 2017 в 6:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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