How to update html using ajax using $.ajax{}

I have javascript which calls a controller method from javascript and returns the json 开发者_运维问答object. Once the json object is returned, I would like to update a table below the search field which will show the results from the json object. Basically I'm trying to list all the objects but want to filter out the results based on some search on a form.

Following is the example code that I use to get json object:

$.ajax({
  type: "GET",
  dataType: "json",
  url: "/students/search/" + this.value,
  success: function(data){
    // logic to update field
  });
});

UPDATE:

JSON object:

[{"student":{"student_type":"D", "student_name":"Blah Blah"}}]

I have a table in my html:

<table id="studentTable">
</table>

I would like to add student_type and student_name into a table

---

Assuming that the data being returned from the controller is an array of objects, I've done something like this in previous projects:

Using the jQuery template plugin:

$.each(data, function(index, element) {
var t = $.template("<tr><td>${student_type}</td><td>${student_name}</td></tr>");

var tdata = {
    student_type: element.student.student_type,
    student_name: element.student.student_name
};

$("#studentTable").append(t, tdata);

});

All of this should go inside the success callback function. If you could provide the html of where this would go in the view, and the JSON you would get back from the controller i can update my answer to better reflect your scenario.