Ajax传Form表单，包括上传文件-优快云博客

本文介绍了如何利用jQuery的form插件jquery-form.js实现AJAX方式的表单提交，并通过设置options参数进行数据处理。包括在没有选择上传文件时的正确提交处理，以及解析服务器返回数据的示例。

2019独角兽企业重金招聘Python工程师标准>>>

被这个问题困扰了好久。。。真是醉了

借用了jquery 的插件，jquery-form.js，链接：http://jquery.malsup.com/form/#download

js代码(options包含很多参数，可以进行设置)

<script type="text/javascript">
    function save(){
        var options = {
            success:function(data){
                if(data.success==true) {
                    alert("保存成功");
                }
            }
        }
        // 当没有选择上传文件，如果还想正确提交时必须做以下处理
        if($("#pdfInput").val()==""){
                $("#pdfInput").remove();
                $("#uploadForm").attr("enctype", "application/x-www-form-urlencoded");
                //或者不用remove()就设为disabled也可以
                //$("#pdfInput").attr("disabled", "disabled");
        }
        
        $('#uploadForm').ajaxSubmit(options);
    }
</script>

Form表单

<form action="${ctx}/StdManage/standardsUpdate" id="uploadForm" method="post" enctype="multipart/form-data">
    <input type="text" name="id">
    <input type="file" name="stdFile" id="pdfInput">
</form>

<button type="button" onclick="save()">save</button>

Controller

@Controller("/StdManage")
public class StdManageController{

    @RequestMapping("standardsUpdate")
    public void standardsUpdate(StandardWithBlobs standardWithBlobs) {
        System.out.println("id:" + standardWithBlobs.getId());
    }
}

StandardWithBlobs

package whu.edu.irlab.model;

import org.springframework.web.multipart.MultipartFile;

public class StandardWithBLOBs extends Standard{

    private String entities;

    private String possibleEntities;

    private MultipartFile stdFile;

    getter and setter ... 
}

转载于:https://my.oschina.net/u/1020238/blog/528607