springmvc+jquery 实现ajax页面无刷新请求

js代码

//保存图片配置    
function saveImage() {
   	 	var startTime = $("#datetimepickerStart").val();
   	 	var endTime = $("#datetimepickerEnd").val();
   	 	var status = $("#status").val();
        if(endTime!="" && endTime<startTime){
        	alert("下线时间必须晚于上线时间");
        	return;
        }
        if(status!='0' && status!='1'){
        	alert("状态只能输入0或者1， 0为关闭  1为启用");
        	return;
        }
        $.ajax({
            type: "POST",
            url: "/chiq_config/imgUpload/saveImage",
            data: {
            	link: $("#link").val(),
            	status: $("#status").val(),
            	startTime: $("#datetimepickerStart").val(),
            	endTime: $("#datetimepickerEnd").val()
            },
            cache: false,
            async: true,
            success: function(data) {
                alert("修改成功");
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
            	alert(textStatus);
                alert("修改失败，请检查网络后重试");
            }
        });
    }

java代码

@RequestMapping(value = "/saveImage", method = { RequestMethod.POST })
	public @ResponseBody Image saveImage(HttpServletRequest request,HttpServletResponse response,
			@RequestParam(required = false) String name,
			@RequestParam(required = false) String link,
			@RequestParam(required = false) String path,
			@RequestParam(required = false) String status,
			@RequestParam(required = false) String startTime,
			@RequestParam(required = false) String endTime){
		
		Image image = new Image();
		image.setLink(link);
		image.setStatus(Integer.valueOf(status));
		image.setStartTime(startTime);
		image.setEndTime(endTime);
		imgUploadService.saveImage(image);
		return image;
	}

jsp

<form name="userForm1" action="/chiq_config/imgUpload/saveImage" method="post">  
        
        <div id="imgLinkDiv">  
            	图片链接<input type="text" name="link" id="link" value="${link }">  
        </div>
        <div id="imgStatusDiv">  
        		启用状态<input type="text" name="status" id="status" value="${status }"> 
        </div>
        <div id="startTimeDiv">  
            	上线时间<input type="text" name="startTime" id="datetimepickerStart" value="${startTime }">  
        </div>
        <div id="endTimeDiv">  
            	下线时间<input type="text" name="endTime" id="datetimepickerEnd" value="${endTime }">  
        </div>       
		<input type="button" id="btnUpload" value="保存" οnclick="saveImage()" />		
    </form>   

form表单上传图片的ajax实现

function uploadImage(){
	var imgPath = $("#uploadFile").val();
    imgPath=imgPath.substr(imgPath.lastIndexOf('\\') + 1);

    if (imgPath == "") {
        alert("请选择上传图片！");
        return false;
    }

    //判断上传文件的后缀名
    var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
    if (strExtension != 'jpg' && strExtension != 'png' && strExtension != 'bmp') {
        alert("仅支持jpg,png,bmp 格式的图片文件");
        return false;
    }
    //使用FormData，进行Ajax请求并上传文件
    var formData = new FormData($( "#userForm2" )[0]);  
    $.ajax({  
         url: '/chiq_config/imgUpload/uploadImage?name='+imgPath,  
         type: 'POST',  
         data: formData,  
         async: false,  
         cache: false,  
         contentType: false,  
         processData: false,  
         success: function (result) {  
        	 $("#upImage").attr('src',result.name);
             alert("图片上传成功");  
         },  
         error: function (result) {  
             alert("图片上传失败");  
         }  
    }); 
}

<form id="userForm2" action="/chiq_config/imgUpload/uploadImage" enctype="multipart/form-data" method="post">    
        <div id="uploadFileDiv">  
            <input type="file" name="uploadFile" id="uploadFile" value="${name} ">  
        </div>   
      <!--   <input type="submit" value="上传">  -->
        <input type="button" οnclick="uploadImage()" value="上传">     
        <div id="imgDiv"><img id="upImage" src="${name}"></div>
    </form>