提交form表单后不刷新不跳转的实现方法_js submit 点击不刷新-CSDN博客

本文链接：https://blog.csdn.net/weixin_40076255/article/details/89875206

方法一：

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

1.引入js

<script type="text/javascript" src="/js/jquery/jquery.form.js"></script> //必须
<script type="text/javascript" src="/js/jquery/jquery.js"></script>  //必须

2.前台html

<form id="form" enctype="multipart/form-data" action="delay/fileUpload" method="post">
    <input type="file" name="file"/>
    <input type="text" name="name"/>
    <input type="text" name="password"/>
    <input class="btn" id="saveContent" type="button" onclick="submitForm();" value="保存"/>
</form>

//保存内容
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<String, Object> result = new HashMap<String, Object>();
        String fileName = file.getOriginalFilename();
        InputStream iso = file.getInputStream();
        result.put("staus",true);
        result.put("msg","保存成功");
    return result;

方法二：

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

<html>
<body> 
<form action="delay/flieUpload" method="post" enctype="multipart/form-data" target="my_iframe">
    <input type="text" name="name"/>
    <input type="text" name="password"/>
    <input id="activeFile" type="file" name="file" class="file"/>
    <input class="btn" id="saveContent" type="button" onclick="save();" value="保存"/>
</form>
 
<iframe id="id_iframe" name="my_iframe" style="display:none;"></iframe>
 
</body>
</html>

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