3
votes

Comment ajouter la réponse Ajax Json au html?

J'utilise ajax get un json comme celui-ci:

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

Comment ajouter "delete_flag", "id", "icon_img" à 3 endroits différents sur html?

javascript jquery html json object

2 commentaires

JavaScript pur ou jQuery

Et quels 3 endroits :)

5 Réponses :

2
votes

vous pouvez utiliser jQuery .html () ou . text ()

Par exemple:

<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>

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

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

0 commentaires

8
votes

Vous pouvez utiliser cette méthode javascript pure comme ci-dessous.

Le code utilise essentiellement document.getElementById ( ) pour obtenir l'élément, et .innerHTML pour définir l'intérieur de l'élément à la valeur de l'objet.

Ce code (et le code utilisant jQuery) utilisent tous deux JSON.parse () pour analyser les données dans l'objet correct que notre code peut lire. Le [0] à la fin est de sélectionner l'objet que nous voulions car il nous donnerait un tableau (et nous voulons un objet).

<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">

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);

Ou vous pouvez utiliser jQuery (qui à mon avis, est beaucoup plus simple). Le code ci-dessous utilise .html () pour modifier l'intérieur du div à l'élément de l'objet, et .attr () à définissez l'attribut src sur la source d'image souhaitée.

<div id="delete_flag"></div>
<div id="id"></div>
<img id="icon_img">

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;

0 commentaires

1
votes

J'ai voté pour les autres réponses, mais cela aidera peut-être quelqu'un d'autre. Sur votre fonction de succès ajax, faites quelque chose comme ceci:

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

si vous avez vraiment envie, vous pouvez créer une boucle for et mettre toute la variable json dont vous avez besoin dans un tableau et créer une fonction pour les analyser tous dans leurs éléments appropriés; vous pourriez l'apprendre par vous-même assez facilement.

0 commentaires

2
votes

Utilisez simplement une analyse JavaScript simple:

<p id="delFlag"></p>
<p id="id"></p>
<p id="img"></p>

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"];

Notez que vous ne pouvez pas analyser l'objet complet jsonData car ce n'est pas JSON - seules les données qu'il contient sont JSON.

0 commentaires

1
votes

<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>

span {
  color: red
}

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

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

$('.id').html(data.dataStore.id);

0 commentaires