提交form表单后不刷新不跳转的实现方法

方法一:

该方法可以使用后台返回的数据,方便请求成功后处理数据。

1.引入js

 //必须
  //必须

2.前台html

//保存内容
function submitForm() {
    // jquery 表单提交
    $("#form").ajaxSubmit(function(result) {
        // 对于表单提交成功后处理,result为表单正常提交后返回的内容
    	if (result.status === true) {        		 
    		alert(result.msg);   		
    	}else{
    		alert(result.msg);
    	}
    });
    return false; // 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转
}

3.后台

/**
     * 保存信息
     * @param model
     * @param request
     * @param file
     * @return
     * @throws IOException
     */
    @RequestMapping(value = "/fileUpload", method = RequestMethod.POST)
    @ResponseBody
    public Object saveApply(@RequestParam("file") MultipartFile file, HttpServletRequest request,
            HttpServletResponse response) throws IOException{
        String name= request.getParameter("name");
        String password= request.getParameter("password");
        Map result = new HashMap();
        String fileName = file.getOriginalFilename();
        InputStream iso = file.getInputStream();
        result.put("staus",true);
        result.put("msg","保存成功");
    return result;

方法二:

该方法无法使用后台返回的数据。


 

方法二要点在于form标签的target属性与iframe标签的name属性值保持一致。方法二后台代码与方法1一样,但是后台返回数据无法在前台使用。

你可能感兴趣的:(js+css+htm)