2017-09-19 8 views
1

ajax呼び出しから返されたデータをアラートとして表示できますが、ejsを使用してテーブル形式で表示します。このデータをajaxを使用してテーブル形式で印刷する方法

誰かが助けることができますか?

AJAXコール

$('#submit').on('click', function() { 
    $.ajax({ 
    url: '/render', 
    type: 'get', 
    dataType: 'json', 
    success: function(data) { 

     for (var i = 0; i < data.length; i++) { 
     alert(data[i].item); 
     } 
    } 
    }); 
}); 

HTML

<div class="container"> 

    <div class="row"> 
    <div class="col-md-4"> 
     <label style="margin-left: 20px;">Shopping item</label>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; 
     <label>Quantity</label> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-8"> 
     <input type="text" id="item" name="item" />&emsp;&emsp;&emsp;&emsp; 
     <input type="text" id="quan" name="quan" />&emsp;&emsp;&emsp;&emsp; 
     <input type="submit" id="submit" value="Add item" style="background-color: #a3a3c2; color:white; width:170px;" /> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-md-8"> 
     <table> 
     <thead> 
      <th>Item</th> 
      <th>Quantity</th> 
     </thead> 
     <tbody id="tbody"> 

     </tbody> 
     </table> 
    </div> 
    </div> 
    </form> 

答えて

2

私は何を完全にわからないんだけど、この

$('#submit').on('click',function() { 
    $.ajax({ 
     url: '/render', 
     type: 'get', 
     dataType: 'json', 
     success: function(data) { 

      for(var i=0;i<data.length;i++) 
      { 
      var Html="<tr> 
       <td>"+data[i].item+"</td> 
       <td>"+data[i].Quantity+"</td> 
      </tr>"; 
      $('#tbody').append(Html); 

      } 
     } 
     }); 
    }); 
+0

が洙ずっと –

+0

回答が良いですありがとうあなたを助けますが、どこで、この plunkr sampleでレンダリングするEJSを使用して、AJAXリクエストのワーキングサンプルを、作られました " ejs "partを使用してテーブル形式で表示しますか?これが正しい答えであれば、質問はかなり誤解を招くことになりました!私は泣いています...ええ少しです;) – CodeHacker

1

を試してみてください達成しようとしている。 しかし、ejsを使用する場合は、データを渡すことができるejsテンプレートを作成する必要があります。

データを取得してテンプレートを呼び出します。

​​

私は多分これが

関連する問題