如何从ajax调用响应中附加html标记

时间:2016-08-31 14:28:11

标签: javascript jquery html ajax

我有一个ajax功能:

$('#app-name').change(function () {//1
  console.log("inside change");
  var applname= this.value;
  console.log(applname);
  $.ajax({//2
    url: 'foo',
    method : 'GET',
    dataType : "json",
    contentType: "application/json",
    data: {"AppID":"appname"},
    success: function(data){
      var order_data = data;
      $('#foo-name').html('');
      $.each(order_data, function(i, item) {//3
        console.log(order_data[i]);
        $('<option value='+ order_data[i] +'>'+order_data[i]).html('</options>').appendTo('#foo-name');
      });//3 
    }
  });//2
});//1

除了向html附加值外,此函数正在执行其他所有操作。 我做错了吗?你能帮忙解决这个问题。

2 个答案:

答案 0 :(得分:2)

将结束</option标记放在您创建的jQuery对象中。不要通过html()方法进行设置。试试这个:

$('<option value="' + order_data[i] + '">' + order_data[i] + '</option>').appendTo('#foo-name');

也就是说,您还可以通过在循环中构建字符串并将其附加到select一次来提高代码的性能,如下所示:

success: function(data) {
    var options = '';
    $.each(data.split(/\n/), function(i, item) {
        options += '<option value=' + item.trim() + '>' + item.trim() + '</option>');
    });
    $('#foo-name').html(options);
}

更新在循环播放之前,您还需要split()表明您正在返回的文字。

答案 1 :(得分:0)

请在您的ajax成功活动中使用以下代码。

success: function(data) {
    var _html = '';
    $.each(order_data, function(i, item) {
        _html += '<option value='+ item +'>'+item+'</options>';
    });
    $('#foo-name').append(_html);
}