Adding values to table using ajax

I have a textbox to enter username and a dropdown to select role. When i chick an "Add" button i need to add these values to a table. I will need to add more usernames and their roles to the table whin "Add" is clicked. 开发者_运维百科I need to attain this without postback( ie AJAX). Also I will Save this table to database when "Save" button is clicked. How can i attian this? I am totally not aware of JQuery or JSON result.

in the browser (with jquery):

   $(document).ready(function(){
      var usertable = [];
      $("#add").click(function(event){
        event.preventDefault();
        var username = $("#username").val();
        var role = $("#role").val();
        usertable.push({
          username: username,
          role: role
        });
        var row = $("<tr></tr>");
        row.append("<td>" + username + "</td>");
        row.append("<td>" + role+ "</td>");
        $("#table").append(row);
      });
      $("#save").click(function(event){
        event.preventDefault();
        var jsonToPost = {};
        jsonToPost.usertable = usertable;
        jsonToPostString = JSON.stringify(jsonToPost);
        $.post("url",jsonToPostString);
      });
});

on the server you'll have a json string specifying a json object with an array in it, packed with objects. You can find out more about unpacking a json string at http://www.json.org/