jquery - jQuery如何在代码中生成代码？

Question

我的问题可能有点令人困惑，但这是我想做的。我有一个脚本：

<script>
   ...some script here...
    var audioPlaylist = new Playlist("2", [
    {
        name:"Lismore",
        mp3:"http://example.com/song.mp3"
    },
    {
        name:"The Separation",
        mp3:"http://example.com/song1.mp3"
    }
 ])
</script>

我想做的是使用 $.get.JSON 动态生成该脚本

var audioPlaylist = new Playlist("2", [
$.getJSON('http://www.example.com/users', function(data) {
$.each(data, function(i,item) {
document.write(name: ''item.fname'',)
document.write(mp3: "http://example.com/"''+item.song_id+''".mp3")
}):
});
])

在 - 的里面<script>

这可能吗？我已经尝试过脚本，但它失败了。

Answer 1

可以动态生成代码来做到这一点，但没有理由这样做。

只需使用该map方法将从 AJAX 调用中获得的数据数组转换为Playlist对象所需的形式：

$.getJSON('http://www.example.com/users', function(data) {
  var items = $.map(data, function(item) {
    return { name: item.fname, mp3: "http://example.com/" + item.song_id + ".mp3" };
  });
  var audioPlaylist = new Playlist("2", items);
});

Answer 2

尝试这个：

//注意：getJSON调用是异步的，除非ajaxSettings被修改为同步，因此audioPlaylist变量只有在getJSON回调完成后才被赋值。

 var audioPlaylist = null; 
 $.getJSON('http://www.example.com/users', function(data) {
    var playData = [];
  $.each(data, function(i,item) {
        playData.push({
            name:item.fname, 
            mp3: "http://example.com/" + item.song_id + ".mp3"
        });
        audioPlaylist = new Playlist("2", playData);
         alert(audioPlaylist);
    });
 });

Answer 3

<script>
//Song Object
function Song(name, mp3){
  this.name = name;
  this.mp3 = mp3;
}

//Create array of Song objects
var songs = new Array();

//Populate it from the AJAX call
$.getJSON('http://www.example.com/users', function(data) {
   $.each(data, function(i,item) {
       songs.push(new Song(item.fname, "http://example.com/" + item.song_id + ".mp3"));
   }):
});

//build the Playlist Object
var audioPlaylist = new Playlist("2",songs);
</script>

Answer 4

如果您尝试更新数据，上述答案是最好的。如果您确实想将脚本写入页面，请首先组装脚本文本，然后执行一些简单的操作，例如：

$('body').append("<script type='text/javascript'>alert('hello world');<\/script>");