javascript - AJAX 调用后更新 JSP 页面内表的值属性

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);
    }
  });
});

我的 Controller 代码如下。

@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 数据，但无法将值绑定(bind)到表。任何建议/答案将不胜感激。提前致谢。

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);
    }
  });
});