在AJAX調用之后更新JSP頁面內的表的values屬性

Question

我在顯示表的內容時遇到問題，一旦單擊同一頁面中的另一張表的某行，就可以提出AJAX請求。 以下是我的JSP頁面中的表代碼。

<table id="previousList" class="table">
  <thead>
    <tr>
      <th colspan="6">Previous Billing Records</th>
    </tr>
    <tr>
      <th>Bill Number</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <c:forEach var="lastBill" items="${previousBills}" varStatus="status">  
      <tr>
        <td>${lastBill.billingId}</td>
        <td>${lastBill.billAmount}</td>
      </tr>
    </c:forEach>
  </tbody>
</table>

var jsonData;
var patientTable = $('#patientsList').DataTable();
var table = document.getElementById("selectedPatient");

$('#patientsList tbody').on('click', 'tr', function() {
  var data = patientTable.row(this).data();
  console.log("Data " + data);

  $.ajax({
    type: "POST",
    url: "/LoginMavenSpringMVC/billing/lastBill",
    data: "patientId=" + data[0],
    success: function(response) {
      console.log("Showing the LastBill Details: " + response);
      jsonData = response;
    },
    error: function(e) {
      alert('Error: ' + e);
    }
  });
});

我的控制器代碼如下。

@RequestMapping(value="/lastBill")
public @ResponseBody String lastBill(ModelMap model, String patientId) 
{
  System.out.println("ID: " + patientId);
  Gson gson = new Gson();
  Bill b = new Bill();
  b.setBillAmount(1000);
  b.setBillingId("12345SDf");
  Collection<Bill> bills = new ArrayList<Bill>();
  bills.add(b);
  model.addAttribute("previousBills",bills);
  String jsonBills = gson.toJson(bills);
  model.addAttribute("jsonBills", jsonBills);
  return jsonBills;
}

我能夠獲取JSON數據，但無法將值綁定到表。 任何建議/答案都是可以理解的。 提前致謝。

Answer 1

試試這個，它應該工作。

 var jsonData; $('#patientsList tbody').on('click', 'tr', function() { var data = patientTable.row(this).data(); console.log("Data " + data); $.ajax({ type: "POST", url: "/LoginMavenSpringMVC/billing/lastBill", data: "patientId=" + data[0], success: function(response) { console.log("Showing the LastBill Details: " + response); jsonData = JSON.parse(response); $.each(jsonData, function(i, bill) { var newRowContent = "<tr><td>"+bill.billingId+"</td><td>"+bill.billAmount+"</td></tr>"; $("#previousList tbody").append(newRowContent); }); }, error: function(e) { alert('Error: ' + e); } }); });