Question

我正在使用getJson将一些信息提取到页面上

$('#request_song').autocomplete({
  serviceUrl: '<%= ajax_path("trackName") %>',
  minChars:1,
  width: 300,
  delimiter: /(,|;)\s*/,
  deferRequestBy: 0, //miliseconds
  params: { artists: 'Yes' },
onSelect: function(value, data){
    // alert('You selected: ' + value + ', ' + $('#request_artist').val()); 
        $.getJSON('/get_events', function(data) {
                    $(data).each(function(key, value) {
                        console.log(value);
                    });
                });

    },
});

json将具有事件的名称以及城市和日期

我需要让页面上的div具有json的值，如

<div id="event_data">

//table info from json

Answer 1

在$()的参数中添加标记以从中创建元素。使用{}查找中的值来设置属性和文本内容（在jQuery 1.4中）。例如。类似的东西：

$('#event_data').append(
    $('<div class="event"/>', {id: 'event_'+key}).append(
        $('<span class="event-name"/>', {text: value.name})
        $('<span class="event-city"/>', {text: value.city})
        $('<span class="event-date"/>', {text: value.date})
    )
);

不要试图将它自己粘在一起（$('<span>'+value.name+'</span>')），否则您将遇到HTML编码问题，并且可能存在跨站点脚本安全漏洞。

Answer 2

我猜你的回答看起来像这样......

var data = [{
  "event": "Birthday"
  "name": "John Doe",
  "city": "Sunnyvale",
  "date": "04/07/1982"
},{
  ...
}]

如果使用$('<div />')或$('<div></div>')创建新元素，jQuery将在创建元素之前使用正则表达式，如果您处理大型数据集，这显然会降低您的速度。

表演用途：

var div = $(document.createElement('div'));

or keep it simple...

var div = document.createElement('div');

对于性能使用标准的循环，而不是$ .each，并缓存长度：

var container = $("#event_data");

for(var i = 0, k = data.length; i < k; i++){
  var event = $(document.createElement('div')),
      name = $(document.createElement('span')),
      city = $(document.createElement('span')),
      date = $(document.createElement('span'));

  // add id to event wrapper, if undefined generate random ID to avoid conflicts
  event.attr('id', 'event_'+data[i].event || Math.floor(Math.random()*100));

  // add each item, if undefined then insert empty text
  name.text(data[i].name || "").appendTo(event);
  city.text(data[i].city || "").appendTo(event);
  date.text(data[i].date || "").appendTo(event);

  // append & appendTo do exactly the same thing, markup preference
  container.append(event);
}

如果您使用text（），则该值将仅被视为仅文本，将不会执行。如果您使用html（），则会出现XSS问题。

希望这有助于您正在寻找。

我现在有一个json对象如何使用元素创建div

2 个答案: