Ajax发送数据到控制器

Question

I'm was wondering what is the difference between these two syntaxes:

  var value = $("#myForm").serialize();
  $.ajax({
    type: "post",
    url: "testMethod",
    data: value
});

and

  var value = $("#myForm").serialize();
  $.ajax({
    type: "post",
    url: "testMethod",
    data: "valueName=" + value
});

I thought they are the same but when I use the first one, in my spring controller this attribute have fully populated properties. When I use the second approach, all the properties of the attribute are null ??

Someone have explanation for this?

This is my JSP :

<form:form id="myForm" action="*" modelAttribute="filters" >

    <form:input ...  path="age" />  
    <form:input ...  path="gender" />   
    <form:input ...  path="location" /> 

</form:form>

This is JS

$('#ok_provinces_btn_id').click(function(){
var second = $('#secondAttr').val();

var f = $("#myForm").serialize();

$.ajax({
    type: "post",
    url: "testMethod",
    data: ?????
});

});

This is my Controller

    @RequestMapping(value="testMethod", method=RequestMethod.POST)
public void testMethod(
        @ModelAttribute("filters") FiltersWrapper filters,
                    @RquestParam String second
        ){

             //Here the **second** param is OK 
    filters.getAge(); //NULL
}

Answer 1

Explaining why you get null attributes with your code In your first variant ( it is correct and will work ):

  var value = $("#myForm").serialize();
  $.ajax({
    type: "post",
    url: "testMethod",
    data: value
});

You already had serialized form into value variable.

In the second variant ( it is incorrect and wouldn't work ):

  var value = $("#myForm").serialize();
  $.ajax({
    type: "post",
    url: "testMethod",
    data: "valueName=" + value
});

You serialized form data into value and after that added valueName= before serialized query. It is not correct approach at all.

Query string must be such, for example: param1=bob&param2=bob1&param3=mama . But in your 2nd example query string is: valueName=param1=bob&param2=bob1&param3=mama . It is invalid query. Thats why properties are null.

Sending data without serializing form If you want to send some parameters, you have to use another approach (anyway params are form or non-form):

var param1 = $("#id_of_needed_data").val();
var param2 = $("#id_of_needed_data").val();
// etc
$.ajax({
    type: "post",
    url: "testMethod",
    data: "param1="+param1+"&param2="+param2; // etc
});

Sending form data + some extra params Firstyly, I don't think it is good idea to send form fields + some extra. I think better is to add this extra params to your form as hidden fields. Anyway, if you want to send some non-in-form + in-form parameters try next code:

var param1 = $("#id_of_needed_data").val();
var param2 = $("#id_of_needed_data").val();
// etc
var value = $("#myform").serialize();
var query = value;
if (value != '') {
    query = query + "&";
}
query = query + "param1="+param1+"&param2="+param2;

$.ajax({
    type: "post",
    url: "testMethod",
    data: ; query;
});