如何从 MySQL 数据库表中获取 JavaScript 变量？

Question

I want to take a JavaScript var from database to JavaScript code.

I have a twitch community that help stream by the way I need to let the user or member add their twitch name to the list so that other members can see them when they are online.

my code is : JAVASCRIPT

var hello = "hello";
/* This is an alternate method to creating javascript methods
function streamer(name, status, url) {
    this.name = name;
    this.status = status;
    this.url = url;
} */

// The streamer object
// here we will store the necessary information from 
// the twitch api json file
var Streamer = {
  id: 0,
  status: "title",
  name: "strimmah",
  display_name: "Strimmah",
  url: "https://secure.twitch.tv/freecodecamp", // test url
  previewImgs: ["large", "medium", "small", "template"],
  game: "GaM3",
  viewers: 0,

  init: function(name, status, game, url) {
    this.name = name;
    this.status = status;
    this.game = game;
    this.url = url;
  },
  init: function(name, status, game, viewers, url) {
    this.name = name;
    this.status = status;
    this.game = game;
    this.viewers = viewers;
    this.url = url;
  },

  initPreviewImgs: function(large, medium, small, template) {
    this.previewImgs[0] = large;
    this.previewImgs[1] = medium;
    this.previewImgs[2] = small;
    this.previewImgs[3] = template;

  }
};
// delete test variables
var test = Object.create(Streamer);
var backUpImage = "https://static-cdn.jtvnw.net/ttv-static/404_preview-640x360.jpg";
var tempStreamers = [
"nokss68", 
"snake606", 
"team_itxx_cod", 
"relapsegtv", 
"sokkaenpyjama", 
"elfepurpl3", 
"lighthund", 
"spacecakezed", 
"nagatsu6", 
"xng360", 
"nazenko", 
"giiskaa", 
"floki_live", 
"kayakox", 
"jejen64",
"spivix",
"keryg4n",
"mehdii95150",
"mrgeekyfr",
"zaykerz92",
"etsalutdit",
"x_dyn_x",
"martind32",
"el_fideo11",
"xmisticoxx",
"zookervinc78",
"MrCraaftt",
"killerelite84",
"Aqu0ss",
"panteleimon42",
"veynstream",
"le_salty_gamer"
];
var streamDisplayStatus = 1; // 0-ALL, 1-Online Only, 2-Offline only
var twitchURL = "https://secure.twitch.tv/"; // to create channel urls

var streamerArray = [];
var showOffline = true;
// ENTRY POINT, 
$(document).ready(function() {
  /*for (var i = 0; i < tempStreamers.length; i++) {
      loadStreamJsonInfo(tempStreamers[i], test);
  }*/
  // initial set of streamers, we start with Overview so show all
  instantiateStreamers();
  // navigator button setup
  navigationButtons();
});

function instantiateStreamers() {
  streamerArray.length = 0;
  for (var i = 0; i < tempStreamers.length; i++) {
    var streamer = Object.create(Streamer);
    loadStreamJsonInfo(tempStreamers[i], streamer);
  }
}

function loadStreamJsonInfo(name, data) {
  /*$.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp?callback=?', function(json) {
      console.log(json);
  }); */
  $.getJSON('https://api.twitch.tv/kraken/streams/' + name + '?callback=?',
    function(json) {
      // console.log(json);
      var stream = json.stream;
      if (stream !== null) {
        var channel = json.stream.channel;
        data.init(channel.display_name, channel.status, channel.game, stream.viewers, channel.url);
        data.initPreviewImgs(stream.preview.large, stream.preview.medium, stream.preview.small, stream.preview.template);
        // console.log(data.name + " " + data.status + " " + data.viewers);
      } else {
        data.init(name, "Offline", "", 0, twitchURL + name)
        data.initPreviewImgs(backUpImage, backUpImage, backUpImage, backUpImage);
      }
      streamerArray.push(data);
      //console.log("TEST: " + streamerArray.length);

      checkDisplayStatus(data);
    }); // end of getJson
}

function checkDisplayStatus(data) {
  switch (streamDisplayStatus) {
    case 0:
      createStreamerDOMItem(data);
      break;
    case 1:
      if (data.status !== "Offline") {
        createStreamerDOMItem(data);
      }
      break;
    case 2:
      if (data.status === "Offline") {
        createStreamerDOMItem(data);
      }
      break;
    default:
      createStreamerDOMItem(data);
      console.log("Default switch");
      break;
  }
}

function createStreamerDOMItem(streamData) {
  var divStart = '<div class="streamer-container">';
  var divEnd = '</div></div>';
  var divStreamerItem = '<div class="streamer-item" align="center">' + '<a target="_blank" href="' + streamData.url +
    '"><iframe src="https://player.twitch.tv/?channel='+ streamData.name +'\" frameborder="0" scrolling="no" height="350" width="100%" /></a>' +
    '<p id="viewer-count"><font color="yellow">' + streamData.viewers + '&nbsp;personne(s) sur ' +
    '</font><a href=\"' + streamData.url + '\" id="streamer-link">' + streamData.name + '</a></p>' 
    + '';

  var final = divStart + divStreamerItem + divEnd;
  $(final).appendTo(".live-channels-container");
}

function clearStreamerDOMItems() {

  $("div").remove(".streamer-container");
}

HTML

<div>                   
  <div class="navbar-container" >
  </div>
  <br>
  <div class="live-channels-container">
  </div>
  <!-- END OF STREAMER BOXES-->
</div>

Now I want to get ( var tempStreamers = ) username from DATABASE.

Answer 1

You can get the tempStreamers by JSONP method which you need a new api to output the data.

Use setinterval to run you function every 2 seconds.Then you will get the newest data.