在视图中调用时如何从ajax结果集中在ejs视图中显示数据

时间:2019-05-30 21:12:01

标签: node.js ejs

我有一个空的ejs视图,但是我想在ejs视图中显示我正在调用的ajax调用的结果集

<script>
 // Fetch 
  $.ajax(`/x`).done(function(data, textStatus, xhr){
console.log(data);
console.log(textStatus);
console.log(xhr);      
  });

</script>
<!-- how do i loop the data received from above and display the content here? -->

我不确定该怎么做。

更新

这就是我现在所拥有的。有没有更整洁的方法来做到这一点,而不是将其附加为html?

<script>
  const gId = '<%= gId %>';

  // Fetch the current users c here from `/g/${gId }/c `
  $.ajax(`/g/${gId }/c `).done(function(data, textStatus, xhr){
    var c = '';
    $.each(data, function(index, value){
      console.log(index);
      console.log(value)
      c += '<div class="col-sm-6 col-md-2"><div><img class="col-sm-12 col-md-11" src="'+value.image+'" /></div><div class="text-center"><input name="card" id="card" type="checkbox" value="'+value.value+'" /> Discard</div></div>';
    });

    $('#c ').append('<div class="row"><div class="row col-sm-12">'+c +'</div><div class="col-xs-2"></div></div>');

    $('#c ').append('<button type="submit">c </button>');
  });



  const checkExchangeStatus = function(){
    $.ajax(`/g/${gId}/allExchanged`).done(function(data, textStatus, xhr){
      if (xhr.status !== 202) { // not pending
        document.location = `/g/${gId}/result`;
      }
    })
  }

  setInterval(checkExchangeStatus, 1000);
</script>
<form method="POST" action="/g/<%= gId %>/exchange">
<div id="c ">
</div>
<div>
<br/>gId : <%= gId %>
</div>
</form>

1 个答案:

答案 0 :(得分:1)

  

“像<%%>这样的ejs代码在服务器上执行并呈现为html。因此,您不能将ejs代码用于ajax请求。”

您可以做的是进行ajax调用,然后使用jQuery更改HTML页面。

我有一个空的ejs视图,但我想显示我在ejs视图中调用的ajax调用的结果集。

<script>

  $.ajax(`/x`).done(function(data, textStatus, xhr){
    console.log(data); //I am assuming this prints
      $('#someID').html(data);


  });

</script>

我不知道您期望得到什么结果,或者您的html看起来如何。如果您使用更多代码更新问题,我可以为您提供进一步的帮助。