Как добавить Ajax Json ответить на HTML? - PullRequest
Новая
       1

Как добавить Ajax Json ответить на HTML?

0 голосов
/ 05 марта 2019

Я использую ajax, получаю json, как это: 

{"dataStore":"[{\"delete_flag\":\"false\",\"id\":\"74\",\"icon_img\":\"img/a5.jpeg\"}]"}

Как добавить "delete_flag", "id", "icon_img" в 3 разных места в html?

Ответы [ 5 ]

0 голосов
/ 05 марта 2019 

var data = {
  "dataStore": {
    "delete_flag": "false",
    id: "74"
  }
}

$('.flag').html(data.dataStore.delete_flag);

$('.id').html(data.dataStore.id);
span {
  color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Flag: <span class="flag"></span> 
<hr />
ID: <span class="id"></span>
0 голосов
/ 05 марта 2019

Просто используйте простой синтаксический анализ JavaScript: 

const jsonData = {"dataStore":"[{\"delete_flag\":\"false\",\"id\":\"74\",\"icon_img\":\"img/a5.jpeg\"}]"};

const parsedData = JSON.parse(jsonData.dataStore)[0];

document.getElementById("delFlag").textContent = "Delete Flag: " + parsedData["delete_flag"];
document.getElementById("id").textContent = "ID: " + parsedData["id"];
document.getElementById("img").textContent = "Image: " + parsedData["icon_img"];
<p id="delFlag"></p>
<p id="id"></p>
<p id="img"></p>

Обратите внимание, что вы не можете проанализировать полный объект jsonData, потому что это не JSON - только данные внутри него - JSON.

0 голосов
/ 05 марта 2019

Вы можете использовать этот метод чистого JavaScript, как показано ниже.

Код в основном использует document.getElementById(), чтобы получить элемент, и .innerHTML, чтобы установить внутреннюю часть элемента в значение объекта.

Этот код (и код, использующий jQuery) оба используют JSON.parse() для анализа данных в правильный объект, который может прочитать наш код.[0] в конце означает выбор объекта, который мы хотели, так как он дал бы нам массив (и нам нужен объект). 

const result = {"dataStore":"[{\"delete_flag\":\"false\",\"id\":\"74\",\"icon_img\":\"img/a5.jpeg\"}]"};
const parsedData = JSON.parse(result.dataStore)[0];

document.getElementById("delete_flag").innerHTML = parsedData.delete_flag;
document.getElementById("id").innerHTML = parsedData.id;
document.getElementById("icon_img").src = parsedData.icon_img;
<div id="delete_flag"></div>
<div id="id"></div>
<img id="icon_img">

Или вы можете использовать jQuery (что, на мой взгляд, намного проще).Приведенный ниже код использует .html(), чтобы изменить внутреннюю часть элементов div для объекта из объекта, и .attr(), чтобы установить атрибут src для требуемого источника изображения.

const result = {"dataStore":"[{\"delete_flag\":\"false\",\"id\":\"74\",\"icon_img\":\"img/a5.jpeg\"}]"};
const parsedData = JSON.parse(result.dataStore)[0];

$("#delete_flag").html(parsedData.delete_flag);
$("#id").html(parsedData.id);
$("#icon_img").attr("src", parsedData.icon_img);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="delete_flag"></div>
<div id="id"></div>
<img id="icon_img">
0 голосов
/ 05 марта 2019

Я проголосовал за другие ответы, но, возможно, это поможет кому-то еще.В вашей функции успеха ajax сделайте что-то вроде этого: 

success: function(data){
         // console.log('succes: '+data);
            var delete_flag = data['delete_flag'];
          $('#results').html(delete_flag); // update the DIV or whatever element
        }

, если вы по-настоящему увлечены, вы можете создать цикл for и поместить все необходимые переменные json в массив и создать функцию для их анализа.все в их собственные элементы;Вы могли бы узнать это самостоятельно довольно легко.

0 голосов
/ 05 марта 2019

Вы можете использовать jQuery .html () или .text ()

Например: 

var json = {"id" : "74"};

$( "#content" )
  .html( "<span>This is the ID: " + json.id + "</span>" );
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div id="content"></div>
</body>

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

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

...