通过jquery脚本提交表单到多个url答案

【问题标题】：Submit form to multiple url through jquery script通过jquery脚本提交表单到多个url
【发布时间】：2014-07-16 10:15:09
【问题描述】：

在我当前的 spring 项目中，我有一个包含两种类型字段的表单：普通文本字段和允许上传图像文件的文件输入。我想将每种类型的字段提交给我的 spring 控制器中的不同方法。文本字段应提交给以下方法之一：

@RequestMapping(value="insert", method=RequestMethod.POST)
@ResponseBody
public String insert(@ModelAttribute("object") E object, BindingResult result) {
    if(serv.cadastra(object)) {
        return "yes";
    }
    else {
        return "not";
    }
}

@RequestMapping(value="update", method=RequestMethod.POST)
@ResponseBody
public String update(@ModelAttribute("object") E object, BindingResult result) {
    if(serv.altera(object)) {
        return "yes";
    }
    else {
        return "not";
    }
}

文件上传字段应该提交给这个方法：

@RequestMapping(value="upload", method=RequestMethod.POST)
@ResponseBody
public String setPicture(@ModelAttribute(value="object") E object, BindingResult result, @RequestParam("file") MultipartFile file) {
    if(serv.upload_picture(object, file))
        return "pic-yes";
    else
        return "pic-not";
}

到目前为止，我已经尝试过这个 jquery 脚本，但它只适用于文本字段：

$(document).on('submit', '.form', function (event) {
    event.preventDefault();

    var $form = $( this ),  url = $form.attr( "action" );
    var posting = $.post( url, $(this).serialize() );
    posting.done(function( data ) {
        var alert = $("#"+data); 
        alert.css("display", "block");
        $(".form").each(function(){
            this.reset();
        });
        $(".upload").each(function(){
            var $upload = $(this), url = $upload.attr("action");
            var posting2 = $.post( url, $(this).serialize() );
            posting2.done(function(data){
                $("#"+data).css("display", "block");
                $("#"+data).fadeOut(2500);
            });
        });
        alert.fadeOut(2500);
    });
});

目前表单的html代码是这样的：

<form id="command" role="form" class="form" action="Usuario/cadastra" method="post">
    <fieldset>
    <div class="panel panel-default">
        <div class="panel-heading">
        </div>
        <div class="panel-body">
      <p>
      <label for="login" class="form-control">login</label>
      <input id="login" name="login" class="form-control" type="text" value=""/>
      </p>

      <p>
      <label for="senha" class="form-control">senha</label>
      <input id="senha" name="senha" class="form-control" type="password" value=""/>
      </p>

      <p>
      <label for="first_name" class="form-control">first_name</label>
      <input id="first_name" name="first_name" class="form-control" type="text" value=""/>
      </p>

      <p>
      <label for="last_name" class="form-control">last_name</label>
      <input id="last_name" name="last_name" class="form-control" type="text" value=""/>
      </p>

      <p>
      <label for="email" class="form-control">email</label>
      <input id="email" name="email" class="form-control" type="text" value=""/>
      </p>    
      </div>
  </div>


        <div class="panel panel-default include">
            <div class="panel-heading">
                Selecione um arquivo de imagem para <i>foto do perfil</i>
            </div>
            <div class="panel-body">

                <form id="command" class="form upload" action="/loja/Usuario/upload" method="POST">
                    <input type="file" name="file" class="form-control"/>
                </form>
            </div>
        </div>

    <p>
        <button type="submit" class="btn btn-lg btn-primary">Cadastrar</button>
    </p>
    </fieldset>
</form>

任何人都可以指出实现这一目标的方向吗？

【问题讨论】：

创建第三个方法，使用相关数据调用原始 2。在客户端拆分帖子数据似乎是错误的（并且很难通过文件上传）；
@user574632 我用一种方法尝试了一次，对象和上传的文件都作为参数（public String insert(@ModelAttribute("object") E object, BindingResult result, @RequestParam(value="file",required=false) MultipartFile file)），但在这种情况下我没有提交任何数据（总是面对一个错误org.springframework.web.multipart.MultipartException: The current request is not a multipart request
不是 spring 用户，但您应该致力于修复该错误，而不是构建 javascript hack。首先，您需要在表单标签上设置enctype="multipart/form-data" - 仅此一项就可以解决问题

标签： java javascript jquery forms spring

【解决方案1】：

对于这个异常：org.springframework.web.multipart.MultipartException：当前请求不是多部分请求

您是否将此行添加到您的 spring xml 或 applicationContext 文件中。

同时在你的类路径中添加 spring-webmvc jar。

【讨论】：

我的项目中不使用任何 xml 文件，只使用 java 类。你知道java代码中的那一行吗？
@KleberMota 尝试：@Bean public CommonsMultipartResolver multipartResolver(){ CommonsMultipartResolver resolver = new CommonsMultipartResolver(); resolver.setMaxUploadSize(sizeInBytes); return resolver; }
@JoaoEvangelista 除此之外，我还尝试将这一行：jsp_dispatcher.setMultipartConfig(new MultipartConfigElement("/tmp", 1024*1024*5, 1024*1024*5*5, 1024*1024)); 添加到我的 WebAppInitializer，但重新部署应用程序时仍然出现相同的错误。
@JoaoEvangelista 通过浏览器中的网络分析器，我注意到只有文本输入字段被发送到服务器，没有列出任何文件输入字段。我希望所有的字段都应该在这里。我曾经知道只有 name 属性的字段被发送到服务器，这就是这里发生的事情。你知道为什么会这样吗？
您是否在表单中添加了 encrtype？它是多部分/表单数据