AJAX将数据发送到控制器 [英] ajax send data to controller

问题描述

我想知道的是这两种语法之间的区别：

  VAR值= $（＃myForm会）序列化（）。
  $阿贾克斯（{
    类型：后，
    网址：TestMethod的，
    数据：值
}）;
 

和

  VAR值= $（＃myForm会）序列化（）。
  $阿贾克斯（{
    类型：后，
    网址：TestMethod的，
    数据：VALUENAME =+价值
}）;
 

我还以为他们是一样的，但是当我用的是第一个，在我的春天控制器这个属性已经完全填充的性能。当我用的是第二种方法，属性的所有属性都为空??

有人有解释吗？

这是我的 JSP

 ＆LT;形式：形式ID =myForm的行动=*的ModelAttribute =过滤器＆GT;

    ＆LT;形式：输入...路径=年龄/＆GT;
    ＆LT;形式：输入...路径=性别/＆GT;
    ＆LT;形式：输入...路径=位置/＆GT;

＆LT; /形式：形式GT;
 

这是JS

  $（'＃ok_provinces_btn_id）。点击（函数（）{
VAR秒= $（'＃secondAttr）VAL（）。

变种F = $（＃myForm会）序列化（）。

$阿贾克斯（{
    类型：后，
    网址：TestMethod的，
    数据： ？？？？？
}）;
 

}）;

这是我的控制器

  @RequestMapping（值=TestMethod的，方法= RequestMethod.POST）
公共无效TestMethod的（
        @ModelAttribute（过滤器）FiltersWrapper过滤器，
                    @RquestParam字符串第二
        ）{

             //这里** **第二个参数是确定
    filters.getAge（）; //空值
}
 

解决方案

解释为什么你空的属性与你的code 在你的第一个变种（这是正确的，并会）：

  VAR值= $（＃myForm会）序列化（）。
  $阿贾克斯（{
    类型：后，
    网址：TestMethod的，
    数据：值
}）;
 

您已经有序列化形式为值变量。

在第二个变种（这是不正确的，是行不通的）：

  VAR值= $（＃myForm会）序列化（）。
  $阿贾克斯（{
    类型：后，
    网址：TestMethod的，
    数据：VALUENAME =+价值
}）;
 

您的序列化表单数据为值，之后加入 VALUENAME = 连载查询之前。这是不正确的做法的。

查询字符串必须是这样的，例如：参数1 =鲍勃和放大器;参数2 = bob1和放大器;参数3 =妈妈。但是，在你的第二个示例的查询字符串： VALUENAME =参数1 =鲍勃和放大器;参数2 = bob1和放大器;参数3 =妈妈。它是无效的查询。这就是为什么属性为null。

不序列化格式如果您想发送一些参数发送数据时，必须使用另一种方法（反正PARAMS是形式还是非格式）：

  VAR参数1 = $（＃id_of_needed_data）VAL（）;
。VAR参数2 = $（＃id_of_needed_data）VAL（）;
// 等等
$阿贾克斯（{
    类型：后，
    网址：TestMethod的，
    数据：参数1 =+参数1 +＆放大器;参数2 =+ param2的; // 等等
}）;
 

发送表单数据+一些额外的PARAMS Firstyly，我不认为这是发送表单字段+一些额外的好主意。我觉得更好的是，这​​些额外的PARAMS添加到您的形式隐藏字段。无论如何，如果你想发送一些非状态正佳+状态正佳的参数尝试下code：

  VAR参数1 = $（＃id_of_needed_data）VAL（）;
。VAR参数2 = $（＃id_of_needed_data）VAL（）;
// 等等
。VAR值= $（＃的MyForm）序列化（）;
VAR的查询=价值;
如果（值！=''）{
    查询=查询+＆放大器;;
}
查询=查询+参数1 =+参数1 +＆放大器;参数2 =+ param2的;

$阿贾克斯（{
    类型：后，
    网址：TestMethod的，
    数据： ;查询;
}）;
 

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
}

解决方案

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;
});

这篇关于AJAX将数据发送到控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！