CODEWITHSUNDEEP
javajqueryjspspring-mvc
user1788542
user1788542

Reputation:

How to post data with jQuery and process it with Spring controller

I am getting for values from Form on button click and I want to post these values to controller to store into database.

function PostData() {
        var form = $('#myFormID')[0]; 
        var data = {};
        var dataString = "";

        for(var i=1; i<form.elements.length-1; i++) {
           var element = form.elements[i];
           alert(element.value);
           data[element.name] = element.value; //assuming the name is set on each element
           dataString = (i>0 ? ";" : "") + element.value;
        }

        //var contextPath = "<c:url value="/checkEmailInDB"/>"; //How to send on this url

        $.post("saveContact", data); //OR       
    }

I am not getting how can I get these value in store into database.

Without using jquery I was sending object and getting values from object like this:

@RequestMapping(value = "/saveContact", method = RequestMethod.POST)
public ModelAndView saveContact(@ModelAttribute Contact contact) {
    insertDAO.saveOrUpdate(contact);    //FRom this contact object I was able store values into database    
    return new ModelAndView("redirect:/");
}

Can someone please tell me how can I receive post response from jquery and store into database?

Upvotes: 0

Views: 2507

Answers (2)

Viraj Dhamal
Viraj Dhamal

Reputation: 5325

On Your JSP write JQuery code as given below-

function PostData() {
   var varFname=$('#fname').val();
   var varLname=$('#lname').val();
   var varEmailId=$('#emailId').val();
   var varPhoneNumber=$('#phoneNumber').val(); 
   var dat = JSON.stringify({"fname" : varFname, "lname" : varLname, "emailId" : varEmailId, "phoneNumber" : varPhoneNumber});

   $.ajax({
            url : "saveContact.ajax",
            type : "POST",
            data : dat,
            contentType : "application/json",
            dataType : "json",
            success : function(response) {
                alert(response);
            },
            error : function() {
                alert("opps.....");
            }
        });
}

Write controller code as given below-

 @ResponseBody
 @RequestMapping(value = "/saveContact", method = RequestMethod.POST)
 public Boolean saveContact(@RequestBody Contact contact) {
    insertDAO.saveOrUpdate(contact);    
    //FRom this contact object I was able store    values into database    
    return true;
 }

Remember: Attribute added in

var dat = JSON.stringify({"fname" : varFname, "lname" : varLname, "emailId" : varEmailId, "phoneNumber" : varPhoneNumber});

must be same as POJO attriutes. And Contact POJO contains getter setters.

e.g. "fname" is a attribute of Contact POJO.

Upvotes: 0

Pravin
Pravin

Reputation: 1147

 function PostData() {
    var form = $('#myFormID')[0]; 
    var data ;
    var dataString = "";

    for(var i=1; i<form.elements.length-1; i++) {
       var element = form.elements[i];
       alert(element.value);
       //assuming the name is set on each element
       var obj = {element.name : element.value};
       data.push(obj);
      }

    //var contextPath = "<c:url value="/checkEmailInDB"/>"; //How to send on this url

    $.post("saveContact", data); //OR       
}

try above

Upvotes: 4

Related Questions