title: Spring MVC-JQuery-AJAX Updating Single row from table using Ajax and Spring MVC
body: <p>Below Code is giving me 400-BAD REQUEST error for AJAX CALL.</p>
  
  <p>In below code there is a table where i am Populating all the Student records like
  rollnumber , firstname , last name and address with edit and Delete button
  right now i am working on EDIT button.</p>
  
  <p>Requirement :- Click on Edit Button , it should make table attributes available for editing for that particular row , after editing click on update and it should get updated into database and should show there again is Non-Editable Field in table.
  Below is my Controller Class</p>
  
  <pre><code>@RequestMapping(value="/updatetemp",method = RequestMethod.POST,produces = 
  {"application/json"})  
  SQLException{
  @ResponseBody
    public boolean edit(@RequestParam("rollnumber") int rollnumber,
                             @RequestParam("firstname") String firstname,
                             @RequestParam("surname") String surname,
                             @RequestParam("address") String address)
                                                      throws SQLException{
          Student s = new Student();
          s.setRollnumber(rollnumber);
          s.setFirstname(firstname);
          s.setSurname(surname);
          s.setAddress(address);
          if(this.studentService.update(s)){
              return true;
          }else{
              return false;
          }
      }
  </code></pre>
  
  <p>Below is my Jquery and Ajax call Code</p>
  
  <pre><code>$(document).ready(function() {
  $(document).on('click','#editlink',function(){
      var par = $(this).parent().parent();
      var tdName = par.children("td:nth-child(2)"); 
      var tdPhone = par.children("td:nth-child(3)"); 
      var tdEmail = par.children("td:nth-child(4)");
      tdName.html("&lt;input type='text' class='firstname' 
  value='"+tdName.html()+"'/&gt;");
      tdPhone.html("&lt;input type='text' class='lastname' 
  value='"+tdPhone.html()+"'/&gt;");
      tdEmail.html("&lt;input type='text' class='address' 
  value='"+tdEmail.html()+"'/&gt;");
      $("#editlink").prop('disabled',true);
  });
  
  $(document).on('click','#updatelink',function(){
      var rollnumber = $(this).parent().siblings('.rollnumber').text();
      var firstname;
      var surname;
      var address;
  $(this).parent().siblings("td.firstname").
  find("input.firstname").each(function() {
          firstname = (this.value);
      });
      $(this).parent().siblings("td.lastname").
  find("input.lastname").each(function() {
          surname = (this.value);
      });
      $(this).parent().siblings("td.address").
  find("input.address").each(function() {
          address = (this.value);
      });
  
      var studentjson = { rollnumber: rollnumber, firstname: firstname, 
  surname: surname,address: address };
  
      $.ajax({
          type: 'POST',
          url: 'http://localhost:8080/SpringDemo/updatetemp',
          data: studentjson,
          contentType: 'application/json; charset=utf-8',
          success: function (response) { 
              console.loge(response);
              if(response == true){
                  $(this).parent().siblings("td.firstname").html("&lt;td 
   class='firstname'&gt;"+firstname+"&lt;/td&gt;");
                  $(this).parent().siblings("td.lastname").html("&lt;td 
  class='lastname'&gt;"+surname+"&lt;/td&gt;");
                  $(this).parent().siblings("td.address").html("&lt;td 
  class='address'&gt;"+address+"&lt;/td&gt;");
              }
          }
      });
  
  });
  </code></pre>
  
  <p>I think the main problem is with my AJAX call.... Please Help me. Its been two days i am trying hard... I am newbie!</p>