CODEWITHSUNDEEP
jqueryjsonajaxspringjsp
JPG
JPG

Reputation: 1255

ajax post request to spring controller

I am trying to send form data as a JSON from my jsp file to a spring controller. For this, I am using jquery ajax post method to hit the controller. I am able to touch the controller and get the JSON. In both places, i.e on ajax method call and controller, I am using POST request. But still, the data gets displayed on url. Below are my files.

JSP page code:

$(document).ready(function(){
     $("#submitButton").click(function(){
         var formData=getFormData();
         var strUrl="http://localhost:8080/Test_ReportingUI/addDb.htm";
         $.post(strUrl, {jsonData: JSON.stringify(formData)},
                  function(response){
                    if(response.status=='ok') {
                      alert("ok");
                    } else {
                      alert('not OK');
                    }
                  }, 'json');
        });
});

Spring controller:

  @RequestMapping (value="addDb.htm", method=RequestMethod.POST)
  ModelAndView  addEditCustomer()
   {
      ModelAndView modelAndView=new ModelAndView("custDB_setup");
      System.out.println("Hello World..");

 return modelAndView;
}

enter image description here

I want to know why am I getting parameters in above shown URL image.

Upvotes: 0

Views: 1139

Answers (2)

İlker Korkut
İlker Korkut

Reputation: 3250

$("#submitButton").click(function(e){
  var formData=getFormData();
  var strUrl="http://localhost:8080/Test_ReportingUI/addDb.htm";
  $.post(strUrl, {jsonData: JSON.stringify(formData)},function(response){
    if(response.status=='ok') {
      alert("ok");
    } else {
      alert('not OK');
    }
  }, 'json');
  e.preventDefault(); // Use jquery style to cancel default click action of element
  return false; // Or use this line to completely cancel default action
});

I have commented last two lines of your needed code lines just use one of them. The problem is your submit buttons default behaviour. So you want to make an ajax call for your form. But your submit button also works its default action. To avoid them you need to use return false; or e.preventDefault(); to exceed that problem. In your code also runs javascript but the default action is more faster than async js job(ajax). So page changes immediately and you couldn't see your ajax result.

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337701

Making an assumption based on the name of the submitButton element and the behaviour you're seeing, it sounds like you need to instead hook an event to the submit event of the form element instead of the button so that you can cancel the standard form submission which is occurring as well as your AJAX request. Try this:

 $("form").click(function(e){
     e.preventDefault();
     var formData = getFormData();
     $.post('http://localhost:8080/Test_ReportingUI/addDb.htm', {
         jsonData: JSON.stringify(formData)
     }, function(response){
           if (response.status == 'ok') {
                alert("ok");
            } else {
                alert('not OK');
           }
      }, 'json');
 });

The form selector is an example, you should change that to be relevant to your HTML. Note that it would be better practice to provide FormData or a plain object to the data parameter instead of hacking around whatever data you're providing to JSON.stringify manually. This is because jQuery will automatically encode values for you where needed. Also, given your example, response.status should really be a boolean. Something like this:

 $("form").click(function(e){
     e.preventDefault();
     var formData = new FormData(this);
     $.post('http://localhost:8080/Test_ReportingUI/addDb.htm', formData, function(response){
           if (response.status) {
                alert("ok");
            } else {
                alert('not OK');
           }
      }, 'json');
 });

Upvotes: 1

Related Questions