ajax不跳转页面提交表单

水深无声 2022-02-23 19:20 362阅读 0赞

#### 一、普通表单 ####

1.  表单

1.  ajax提交

$('form').submit(function (event) { 
        event.preventDefault();
        var form = $(this);
        $.ajax({ 
          type: form.attr('method'),
          url: form.attr('action'),
          data: form.serialize(),
          success: function(data){ 
          	console.log(data);
          }
        });
    });

1.  处理请求

@RequestMapping("/handleForm1")
    @ResponseBody
    public String handleForm1(String name) { 
    	System.out.println(name);
    	return "提交的是："+name;
    }

1.  执行效果：  
    ![在这里插入图片描述][20190408162808559.png]

#### 二、文件上传表单 ####

1.  表单

1.  ajax提交

$('form').submit(function(event) { 
        event.preventDefault();
        var form = $(this);
        var formData = new FormData(this);
        $.ajax({ 
            type: form.attr('method'),
            url: form.attr('action'),
            data: formData,
            mimeType: "multipart/form-data",
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) { 
                console.log(data);
            }
        });
    });

1.  处理请求

@RequestMapping("/handleForm1")
    @ResponseBody
    public String handleForm1(String name, MultipartFile photo) { 
    	return "name："+name+" photo 文件大小:"+photo.getSize();
    }

1.  执行效果：  
    ![在这里插入图片描述][20190408164924460.png]

#### 三、多文件上传表单 ####

1.  表单修改

1.  ajax提交  
    js同上
2.  处理请求

@RequestMapping("/handleForm1")
    @ResponseBody
    public String handleForm1(String name, MultipartFile[] photos) { 
    	return "name："+name+" photo 文件个数:"+photos.length;
    }

1.  执行效果：  
    ![在这里插入图片描述][20190408171813511.png]

> 延伸阅读：  
> [Using\_XMLHttpRequest - 提交表单和上传文件][Using_XMLHttpRequest -] （AJAX Form Submit Framework）

[20190408162808559.png]: /images/20220223/23bb883be6f04592b481eba34b49848a.png
[20190408164924460.png]: /images/20220223/1bd8046ce45f44b4816e2c513ce39e25.png
[20190408171813511.png]: /images/20220223/16f42acc25b34b9891982ecfe05dc027.png
[Using_XMLHttpRequest -]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#%E6%8F%90%E4%BA%A4%E8%A1%A8%E5%8D%95%E5%92%8C%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6