2016-12-29 62 views
0

如何在该json值上生成表格。里面的ajax函数的数据是在控制台中打印的,而且在jsp中,但在其外侧值是未定义的错误是什么?如何在jsp页面内使用ajax函数的json值?

<head> 
<title>Spring MVC Ajax Demo</title> 
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script type="text/javascript"> 
function doAjax() { 
    var samp; 
    $.ajax({ 
     url : '/RoomController/ViewMember', 
     type : 'GET', 
     success : function(data) { 
      samp=data; 
      console.log(samp[0].memberName); 
      $('#json').html(samp[3].memberName); 
     } 
    }); 
    document.getElementById("memberList").value=samp; 
} 
</script> 
</head> 
<body> 
<button id="demo" onclick="doAjax()" title="Button">Get the 
    time!</button> 
<div id="time"> 
    <label id="json"></label> 
    <input type="hidden" id="memberList" name="memberList"> 
    <table> 
     <c:forEach items="${memberList}" var="firstname"> 
      <tr> 
       <td>${firstname.memberName}</td> 
      </tr> 
     </c:forEach> 

    </table> 

</div> 

回答

0

试试这个。注意:此用了jQuery

的Javascript:

var myList = [{"name" : "abc", "age" : 50}, 
      {"age" : "25", "hobby" : "swimming"}, 
      {"name" : "xyz", "hobby" : "programming"}]; 

// Builds the HTML Table out of myList. 
function buildHtmlTable(selector) { 
    var columns = addAllColumnHeaders(myList, selector); 

for (var i = 0 ; i < myList.length ; i++) { 
    var row$ = $('<tr/>'); 
    for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) { 
     var cellValue = myList[i][columns[colIndex]]; 

     if (cellValue == null) { cellValue = ""; } 

     row$.append($('<td/>').html(cellValue)); 
    } 
    $(selector).append(row$); 
} 
} 

// Adds a header row to the table and returns the set of columns. 
// Need to do union of keys from all records as some records may not contain 
// all records 

function addAllColumnHeaders(myList, selector) 

{ 
    var columnSet = []; 
var headerTr$ = $('<tr/>'); 

for (var i = 0 ; i < myList.length ; i++) { 
    var rowHash = myList[i]; 
    for (var key in rowHash) { 
     if ($.inArray(key, columnSet) == -1){ 
      columnSet.push(key); 
      headerTr$.append($('<th/>').html(key)); 
     } 
    } 
} 
$(selector).append(headerTr$); 

return columnSet; 
}​ 

HTML:

<body onLoad="buildHtmlTable('#excelDataTable')"> 
<table id="excelDataTable" border="1"> 
    </table> 
</body>​ 

要调用表,尝试根据你的代码它

table.on('xhr', function() { 
    var ajaxJson = table.ajax.json(); 
    alert(ajaxJson.data.length + ' row(s) were loaded'); 
}); 

变化。

+0

没关系,但是如何获得ajax函数外部的'samp'值。只要我把'console.log(samp [0] .memberName);' ajax的外侧意味着它是未定义的。 – Manihtraa

+0

@Manihtraa我编辑了我的答案。再试一次 – Farid