您的位置：首页 > Web前端 > JQuery

Spring MVC + AJAX + Jquery ajax callback to success function is not working

2014-09-02 17:37 597 查看

There is some problem with callback function of Ajax by returning string value from Spring Controller. I want the image to be uploaded asynchronously, Upload is successful but the page is redirecting to the another page and the callback function is not called.

JSP: image-upload.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>


<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>

My Controller:

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

The "imageurl"
should be returned to my current jsp page(image-upload.jsp) and have to show an alert msg. But it is showing the "imageurl" on the other page (showing on the URL which we have called in ajax i.e http://www.test.com/SampleUpload/uploadfile).
There is no page with name 'uploadfile'. I have tried different ways but didn't worked. Please help me to fix it ( I want to return the image url to our ajax callback function and have to show alert msg in the same page and the page shouldn't be reloaded or
refreshed or redirected). I am also using Spring security in my application.

Answer:

Remove the action attribute from the form, and directly give URL in your ajax call.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Spring MVC AJAX Jquery ajax callback

相关文章推荐

新的分享

章节导航