Comment jquery lit les données de json et les ajoute au HTML-js tutoriel-php.cn

Comment jquery lit les données de json et les ajoute au HTML

小云云

Libérer： 2017-12-07 15:43:27

original

2408 Les gens l'ont consulté

jQuery est une bibliothèque JavaScript multi-navigateurs qui simplifie les opérations entre HTML et JavaScript. Dans les applications pratiques, lorsqu'il y a des caractères chinois, l'utilisation directe de la fonction json_encode() entraînera l'encodage des caractères chinois sous la forme de "u***". Ce problème a été résolu depuis php5.4. pour résoudre le problème du codage des caractères chinois. Dans cet article, nous vous présentons principalement les informations pertinentes sur la façon d'utiliser jquery pour lire des données de json et les ajouter au HTML.

Format JSON

json est le format de données le plus fréquemment utilisé en Ajax pour la communication entre les navigateurs et les serveurs. sans cela.

Description du format JSON

Il est important de noter que les noms d'attributs en JSON doivent être mis entre guillemets.

1. Téléchargez et installez jquery

Vous pouvez introduire la version en ligne de js via la méthode suivante :

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

Copier après la connexion

Référez-vous à la documentation d'installation : http://www.jb51.net/zt/jquerydown.htm

2. Préparez un fichier au format json. Le suffixe ne peut pas être .json

Par exemple, voici le suivant. format de result.json

{
 "title":"【UI测试结果】-转转2017/1/23 14:47",
 "starttime":"2017/1/23 15:00 45",
 "endtime":"2017/1/23 15:01 42",
 "passcount":10,
 "failurecount":5,
 "resultinfo":[
 {
 "name":"发布",
 "moudle":"Publish",
 "pass":"true",
 "onecepass":"true",
 "log":"true"
 },
 {
 "name":"登录",
 "moudle":"Login",
 "pass":"false",
 "onecepass":"true",
 "log":"asserterrorlog",
 "failurereason":{
  "errorlog":"asserterror",
  "errorimg":"./登录.jpg"
  }
 }
 ]
}

Copier après la connexion

3. Obtenir les données du fichier Json. via $.getJSON

Par exemple, l'exemple suivant : lire le contenu du fichier result.json et le stocker dans la variable result Le résultat est un format json <. 🎜>

$.getJSON(&#39;./result.json&#39;,function(result){}

Copier après la connexion

4. Ajoutez du contenu HTML après l'élément positionné via [$('# element id').after(html content);]

Méthode de positionnement des éléments

$("#id")：定位到id，
$(“p")：定位到标签p，其他标签同理
$(“.class”)：定位到class

Copier après la connexion

Insérer la position du contenu html :

append() - Insérer du contenu à la fin des éléments sélectionnés
prepend() - Insérer du contenu au début des éléments sélectionnés Content
after() - Insérer du contenu après l'élément sélectionné
before() - Insérer du contenu avant l'élément sélectionné

Opération de données Json

Objet JSON [clé] pour lire le contenu : result['title'], ou utilisez result." title"

La valeur objet du tableau peut être obtenue via $.each :

$.each (Objet tableau JSON, fonction (index de parcours i, objet de parcours) {Objet traversé par opération})

Lisez result.json et ajoutez le code html comme suit

(jquery doit être écrit dans la balise <script> à l'intérieur) <strong></strong><br/></p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(document).ready(function(){ //使用getJSON方法读取json数据, //注意：info.json可以是不同类型文件，只要其中的数据为json类型即可 $.getJSON('./result.json',function(result){ var html_title=''; var html_resultinfo=''; html_title += '<b>'+result["title"]+'</b>'; $('#resultitle').after(html_title); $.each(result["resultinfo"],function(i,item){ if(item["pass"]=="true") { html_resultinfo += '<tr><td>' + item['name'] + '</td>' + '<td>' + item['moudle'] + '</td>' + '<td>' + item["pass"] + '</td>' + '<td>' + item['onecepass'] + '</td>' + '<td id="' + item['moudle'] + '" class="collapsed" onclick="collapsedisplay(' + item['moudle'] + ')"><u style="color: blue;">展开</u></td></tr>'; html_resultinfo +='<tr id="' + item['moudle'] + 'info" class="collapsedinfo" style="display:none"><td colspan="5">' + item['log'] + '</td></tr>'; } $('#infotitle').after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。 }); }); </script>

用例名称	模块名称	是否成功	一次成功	详情

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment jquery lit les données de json et les ajoute au HTML