Spring MVC + AJAX + Jquery ajax回调成功函数不起作用答案

【问题标题】：Spring MVC + AJAX + Jquery ajax callback to success function is not workingSpring MVC + AJAX + Jquery ajax回调成功函数不起作用
【发布时间】：2014-07-08 05:43:10
【问题描述】：

Ajax 的回调函数从 Spring 控制器返回字符串值存在一些问题。我希望图片异步上传，上传成功但是页面重定向到另一个页面并且没有调用回调函数。

JSP：图片上传.jsp

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>some title</title>


<script src="<c:url value="/resources/scripts/jquery.js" />"></script>


<link rel="stylesheet" href="<c:url value="/resources/css/jquery-ui.css" />">
<script src="<c:url value="/resources/scripts/jquery-ui.js" />"></script>


<script type="text/javascript">

    $(document).ready(function(){       

        $("#popsave").click(function(e){
                $.ajax({
                url: $("#uploadform").attr( "action"),
                data: {fileToUpload : formData},
                type: 'POST',
                cache: false,
                processdata: false,
                contentType : false,
                async: true,
                dataType: "json",
                mimeType: "application/json", 
                success: function(data){
                    alert(JSON.stringify(data));
                },
                error: function(){
                    alert("something went wrong");
                  }
            });
            e.preventDefault();
            return false;

        });

    });  


</script>

</head>

<body> 
       <!-- image uploading pop up --> 

          <form method="post" action="/SampleUpload/uploadfile" id="uploadform" enctype="multipart/form-data">
            <input type="file" name="fileToUpload" id="fileToUpload" />
            <table style="align:center;"><tr><td><input id="popsave" type="submit" value="Save" /></td><td><input id="cancelBtn" type="button" value="cancel"/></td></tr></table>
            <img id="cancelpop" style="width:20px;height:20px;position: absolute;top:-15px;right:-15px;" src="<c:url value='/resources/images/cancel.png'/>"  alt="cancel"/>
          </form>


</body>
</html>

我的控制器：

@RequestMapping(value = "/uploadfile", method = RequestMethod.POST) 
public @ResponseBody String uploadImage(HttpServletRequest request, @RequestParam(value = "fileToUpload") MultipartFile image) throws IOException {
            String fileName = image.getOriginalFilename();  
            String imageurl = "";
            try {
                if(fileName != ""){
                String path = (String) request.getSession().getServletContext().getRealPath("/");
                String rndfilename = RandomStringUtils.randomAlphanumeric(20);
                File file = new File(path+"resources/tempuploads/"+ rndfilename + fileName);

                imageurl = path+"resources/tempuploads/"+ rndfilename + fileName;
                fileName = file.toString();
                FileUtils.writeByteArrayToFile(file, image.getBytes());
                System.out.println("Go to the location:  " + file.toString()
                        + " on your computer and verify that the image has been stored.");
                }
            } catch (IOException e) {
                throw e;
            }

            return imageurl;
        }

“imageurl”应该返回到我当前的jsp页面（image-upload.jsp）并且必须显示一个警报消息。但它在另一个页面上显示“imageurl”（显示在我们在 ajax 中调用的 URL 上，即http://www.test.com/SampleUpload/uploadfile）。没有名称为“uploadfile”的页面。我尝试了不同的方法，但没有奏效。请帮我修复它（我想将图像 url 返回到我们的 ajax 回调函数，并且必须在同一页面中显示警报消息，并且不应重新加载或刷新或重定向页面）。我还在我的应用程序中使用 Spring 安全性。

【问题讨论】：

从表单中移除action属性，直接在你的ajax调用中给出URL。

标签： jquery ajax spring-mvc spring-security asyncfileupload

【解决方案1】：

从表单中删除 action 属性，并在您的 ajax 调用中直接给出 URL。

【讨论】：