How to obtain and load JSON data through JS in html, jsjson

How to obtain and load JSON data through JS in html, jsjson

When writing pages with logic repeatability of content, using json data can significantly improve programming efficiency and facilitate later data maintenance. Therefore, on the video topic page, you need to display multiple video data columns. I chose to use json.

HTML is as follows (only the key part is displayed and JQ needs to be referenced)

<Div class = "container-fluid content"> <div class = "container neirong"> <div class = "left fl"> <div class = "title"> popular Videos </div> <div class = "medialist"> </div>

JS is as follows:

<Script> $ (document ). ready (function () {console. log (1, 1111) $. getJSON ('data. json', function (data) {console. log (222) var mediahtml = ""; $. each (data, function (I, data) {mediahtml + = '<div class = "media">' + '<div class = "media-left">' + '<a data-toggle = "modal" data- target = "# myModal"> '+'  '+ '</a>' + '</div>' + '<div class = "media-body">' + '<div class = "title"> '+' <Span class = "classify"> '+ data ["classify"] +' </span> '+' <span class = "titlename media-heading">' + data ['titlename'] + '</span>' + '</div>' + '<span class = "time">' + '<span class = "glyphicon glyphicon-time "> </span> '+' <span> '+ data ['pubdate'] +' </span> '+' <p> '+ data [" intro "] + '</p>' + '<div class =" guest ">' + '<span class =" jia "> jia </span>' + '< span class = "name"> '+ data ["name"] +' </span> '+' <span class = "position "> '+ Data [" position "] +' </span> '+' <span class =" glyphicon-eye-open "> </span> '+' <span class = "click-rite"> </span> '+' </div> '+' <div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel"> '+' <div class = "modal-dialog" role = "document"> '+' <div class = "modal-content"> '+' <div class = "modal-header"> '+' <button type = "button" class = "close "data-dismiss =" Modal "aria-label =" Close "> '+' <span aria-hidden =" true "> × </span> '+' </button> '+' </ div> '+' <div class = "modal-body"> </div> '+' </div> '// var url_mobi = data. url_mobi; // var url_pc = data. url_pc; // if (navigator. userAgent. match (/(iPhone | iPod | Android | ios | iOS | iPad | Backerry | WebOS | Symbian | Windows Phone | Phone)/I) {// $ ('. modal-body '). prepend (url_mobi); //} else {// $ ('. modal-body '). prepen D (url_pc); //}) $ ('. medialist '). after (mediahtml) ;}}) $ ('# mymodal '). on ('shown. bs. modal', function (e) {// key code. If modal is not set to block, $ modala_dialog.height () is zero (this).css ('display', 'block '); var modalHeight = $ (window ). height ()/2-$ ('# myModal. modal-dialog '). height ()/2; (this).find('.modal-dialog').css ({'margin-top': modalHeight}) ;}); // you can determine when you Click Preview. // $ ('. modal '). on ('click', function () {// If ((('{mymodal'}.css ("display") = "none") {// $ ('. modal-body '). children ('iframe '). attr ('src', ''); //} else {// $ ('. modal-body '). children ('iframe '). attr ('src', // 'https: // v.qq.com/iframe/player.html? Vid = v0508nqkm75 & tiny = 0 & auto = 0'); //}) </script>

The comment part is not readable and does not affect the content.

First, you must create a json file. The json file requires the data format and does not recognize all types of symbols in the url. Therefore, an error is prompted, it will block the JS process and cause the data not to be displayed on the page. I have found this problem for a long time, and the json problem will not be reported in js. The solution is to use the encode method to format the url and add json to it. In html, decode should be used to return the url.

The second pitfall is to insert html into a tag. There are four methods that can be implemented after. Do not use the inverse method.

The third point is to note that do not forget the plus sign when splicing a string. If one is missing, a problem will occur. A small problem will be found for a long time, and JS will not report a splicing error, which is hard to detect.

The preceding method is used to obtain and load JSON data.