communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > le corps du texte

jQuery中使用Ajax获取JSON格式数据示例代码_jquery

WBOY
Libérer： 2016-05-16 17:12:20
original
994 Les gens l'ont consulté

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSONM文件中包含了关于“名称”和“值”的信息。有时候我们需要读取JSON格式的数据文件，在jQuery中可以使用Ajax或者 $.getJSON()方法实现。

下面就使用jQuery读取music.txt文件中的JSON数据格式信息。
首先，music.txt中的内容如下：

复制代码 代码如下:

[
{"optionKey":"1", "optionValue":"Canon in D"},
{"optionKey":"2", "optionValue":"Wind Song"},
{"optionKey":"3", "optionValue":"Wings"}
]

下来是HTML代码：
复制代码 代码如下:

点击按钮获取JSON数据




使用Ajax获取JSON数据的jQuery代码：
复制代码 代码如下:

$(document).ready(function(){
$('#button').click(function(){
$.ajax({
type:"GET",
url:"music.txt",
dataType:"json",
success:function(data){
var music="
    ";
    //i表示在data中的索引位置，n表示包含的信息的对象
    $.each(data,function(i,n){
    //获取对象中属性为optionsValue的值
    music+="
  • "+n["optionValue"]+"
    • ";
    });
    music+="
";
$('#result').append(music);
}
});
return false;
});
});

当然，也可以使用$.getJSON()方法，代码简洁一点：
复制代码 代码如下:

$(document).ready(function(){
$('#button').click(function(){
$.getJSON('music.txt',function(data){
var music="
    ";
    $.each(data,function(i,n){
    music+="
  • "+n["optionValue"]+"
    • ";
    });
    music+="
";
$('#result').append(music);
});
return false;
});
});
Étiquettes associées：
ajax jquery
source：php.cn
Article précédent：一个js导致的jquery失效问题的解决方法_javascript技巧 Article suivant：Google Dart编程语法和基本类型学习教程_基础知识
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Comment récupérer les valeurs des lignes non sélectionnées dans un tableau de données HTML à l'aide de jquery J'essaie d'obtenir la valeur de toutes les lignes sur lesquelles le bouton n'a pas été cli...
Depuis 2024-04-05 09:26:49
0
1
1418
Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
Depuis 2024-04-04 18:40:04
0
1
3528
J'ai créé un élément en CSS pur via des signets. Il est créé mais n'est pas visible Mon code est le suivant : g=document.createElement('div');g.setAttribute("id",&q...
Depuis 2024-04-04 17:27:27
0
1
417
Impossible d'envoyer les données du formulaire sur Safari/Firefox iOS Cela fonctionne sur toutes les plateformes sauf Safari/Firefox sur iOS : jQuery("#gfo...
Depuis 2024-04-04 12:53:48
0
1
303
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal