选中复选框时,将值附加到 JSON 网址并自动刷新 JSON

Append value to JSON url, when checking a checkbox and automatically refresh JSON

本文关键字:JSON 刷新 复选框      更新时间:2023-09-26

我真的需要一些帮助。

<div id="entrylist"></div>
var urlSource = "http://www.example.com/catgories=Cat1,Cat,2,Cat3";
        $.getJSON(urlSource, function(data){
          $.each(data, function(i,entry){
           if(entry.LiveStatus == 3) { 
            content = '<div class="row filmate">';
            content += '<div class="large-4 columns no-padding">';
            content += '<a href="#" onclick="playVideo(&#39;' + entry.VideoStreamUrl + '&#39;)"><img src="' + entry.ThumnailUrl + '" /></a><p>' + entry.Viewers + '<img src="img/eyes.png" /></p>';
            content += '</div>';
            content += '<div class="large-8 columns no-padding">';
            content += '<h2>' + entry.Title + '</h2>';
            content += '</div>';
            content += '</div>';
        } else if(entry.LiveStatus == 2) { 
            content = '<div class="row filmate">';
            content += '<div class="large-12 columns no-padding">';
            content += '<h2>' + entry.Title + '</h2>';
            content += '</div>';
            content += '<div class="large-12 columns no-padding">';
            content += '<a href="#" data-reveal-id="myModal"><img id="ls-3" src="' + entry.ThumnailUrl + '" /></a><p>' + entry.Viewers + '<img src="img/eyes.png" /></p>';
            content += '</div>';
            content += '</div>';
        } else if(entry.LiveStatus == 1) { 
            content = '<div class="row filmate">';
            content += '<div class="large-12 columns no-padding">';
            content += '<h2>' + entry.Title + '</h2>';
            content += '</div>';
            content += '<div class="large-12 columns no-padding">';
            content += 'in direct<img src="' + entry.ThumnailUrl + '" /><p>' + entry.Viewers + '<img src="img/eyes.png" /></p>';
            content += '</div>';
            content += '</div>';
        } else {
            content = '<div class="row planificat">';
            content += '<div class="large-12 columns planned no-padding">';
            content += '<h2>' + entry.Title + '</h2>';
            content += '<p>planificat</p>';
            content += '</div>';
            content += '</div>';        
        };
            $(content).appendTo("#entrylist");


          });
        });

这是我的JSON获取和发布代码。请给我一个提示,说明如何:

  1. 选中复选框时,将类别附加到 urlSource 变量。
  2. 选中该复选框后,重新加载 JSON 并显示新选项

提前谢谢你!

使用jquery中的.val() - 这将从表单中获取值,然后将其附加到URL中。

http://api.jquery.com/val/

对于这样的事情,我建议查看jquery文档是一个很好的第一站,因为它可以为您提供有关如何解决此类问题的想法。