jqueryを利用してどのようにjsonからデータを読み取ってこれに追加しますか？
JSONフォーマット
JsonはAjaxの中で最も使用頻度が高いデータフォーマットで、ブラウザとサーバーの間の通信は切り離せません。
JSONフォーマット説明
特に注意したいのは、JSONにおける属性名は引用符を用いて生じる必要があることである。
1.ダウンロードインストールjquery
オンラインバージョンのjsは以下の方法で導入できます。
2.json形式のファイルを準備します。拡張機能はなくてもいいです。json
例えば、以下はresult.jsonのフォーマットです。
例えば、以下の例では、result.jsonファイルの内容を読み出し、result変数に格納した結果、json形式になります。
元素の位置付け apped()-選択された要素の最後にコンテンツ を挿入する。 prepend()-選択された要素の先頭にコンテンツ を挿入する。 after()-選択された要素の後にコンテンツ を挿入する。 before()-選択された要素の前にコンテンツを挿入する Jsonデータの操作
JSON対象[key]で内容を読み取る：result[title]，またはresult."title"
配列のオブジェクト値は、$eachでデータを取得できます。
ドル.each（JSON配列オブジェクト、function（インデックスiを巡回し、オブジェクトを巡回）｛操作遍歴の対象｝
result.jsonを読んで、htmlのコードを追加します。
（jqueryは「script」ラベルに記入する必要があります。）
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。
JsonはAjaxの中で最も使用頻度が高いデータフォーマットで、ブラウザとサーバーの間の通信は切り離せません。
JSONフォーマット説明
特に注意したいのは、JSONにおける属性名は引用符を用いて生じる必要があることである。
1.ダウンロードインストールjquery
オンラインバージョンのjsは以下の方法で導入できます。
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>2.json形式のファイルを準備します。拡張機能はなくてもいいです。json
例えば、以下は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"
}
}
]
}例えば、以下の例では、result.jsonファイルの内容を読み出し、result変数に格納した結果、json形式になります。
$.getJSON('./result.json',function(result){}元素の位置付け
$("#id")： id，
$(“p")： p，
$(“.class”)： classJSON対象[key]で内容を読み取る：result[title]，またはresult."title"
配列のオブジェクト値は、$eachでデータを取得できます。
ドル.each（JSON配列オブジェクト、function（インデックスiを巡回し、オブジェクトを巡回）｛操作遍歴の対象｝
result.jsonを読んで、htmlのコードを追加します。
（jqueryは「script」ラベルに記入する必要があります。）
<!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>
</HEAD>
<BODY>
<div style="margin-top: 30px">
<div style="font-size: 30px;text-align: center">
<p id="resultitle" ></p>
</div>
</div>
<div id="resultinfo" style="clear: both;padding-top: 30px">
<table style="width: 1080px">
<tr id="infotitle">
<th style="width:360px"> </th>
<th style="width:200px"> </th>
<th style="width:180px"> </th>
<th style="width:180px"> </th>
<th style="width:160px"> </th></tr>
</table>
</div>
</div>
</BODY>
</HTML>以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。