如何在spring mvc中将用户表单数据发送到服务器

Question

I'm having a login form like this:

<form:form modelAttribute="user" method="post" enctype="application/x-www-form-urlencoded">
                <form:input path="userEmailId"  />
                <form:password path="userPassword />
       <input type="submit" value="sign up" />
 </form:form> 

and this is my user.java for setters and getters

public String getUserEmailId() {
        return userEmailId;
    }

    public void setUserEmailId(String userEmailId) {
        this.userEmailId = userEmailId;
    }

    public String getUserPassword() {
        return userPassword;
    }

    public void setUserPassword(String userPassword) {
        this.userPassword = userPassword;
    }

After clicking on sign up, I want this value first get converted to json and then send this value to the server by post method. I want to use RESTful WEB services in order to achieve this. Any thoughts on this?

Answer 1

You can use JSON to serialize your form into a json object , and then use AJAX to send a post request to your web service:

$(function() {
    $('#formId').submit(function(event) {
        event.preventDefault(); // prevent this form from being submited
        var userJson = JSON.stringify(jQuery('#formId').serializeArray());
        $.ajax({
            type: "POST",
            url: "/Path/To/Your/Web/Service",
            data: userJson,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data){
                 alert(data);//handle it in a proper way
            },
            failure: function(errMsg) {
               alert(errMsg);//handle it in a proper way
            }
        });
        return false;
    });
});

And then on your WebService, you should have a method to handle this post request:

@Controller
@RequestMapping("/path/to/your/web/service")
public class WebServiceController{

    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public ResponseEntity<String> handleLogin(@RequestBody User user){
         //user contains data passed from UI form. Check it against your repository(database ? )

    }
}

Be aware, that this example is only an easy enough example, and it doesn't take into consideration any aspects related to security.

Answer 2

function getFormData($form){         
 // Make sure the checked checkboxes value is true
 $.each($form.find("input[type='checkbox']:checked"), function(i, c){
    $(c).val(true);  
 });         

 // Serialize
 var unindexed_array = $form.serializeArray();
 var indexed_array = {};

 $.map(unindexed_array, function(n, i){
     if(indexed_array[n['name']]){
         // concat
         var valueArray = [indexed_array[n['name']]];
         indexed_array[n['name']] = valueArray.concat(n['value']);
     } else {
         indexed_array[n['name']] = n['value'];
     }

 });

 // Add the unchecked checkboxes
 $.each($form.find("input[type='checkbox']:not(:checked)"), function(i, c){
     indexed_array[$(c).attr('name')] = "false";
 });

 return indexed_array;
 }

//...
$.ajax({                 
            url: entityUrl,
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify(getFormData($(form))),             
            dataType: "json",               
            success: success,
            error: error
        });